CSS Overview

TOC

XHTML and CSS

XHTML differs from old HTML in several ways:

Separating Content From Presentation

Content is the text, images and navigation features of a web page. Presentation is the hidden code that tells the browser how the content should look -- where it is placed, what color it is, what size and how the content should respond to user interaction.

In plain HTML, it is possible to turn text from normal "roman" style (like this) to for example, red colored italic by use of the <font> tag:

Web page:Markup:

This is red italic text.

 
<p><font color="red"><i>This is red 
italic text.</i></font></p>

The thing to notice, is that the tags controlling the presentation of the text is mingled with the text in the markup (page source code.) In fact, every place we want red italic text, those <font> and <i> tags have to be used. That interspersion of code is a poor way to implement web pages for several important reasons:

  1. As pages become complex, it becomes more difficult for staff to locate and maintain phrases and content amongst all the <font> tags. Further, it makes it difficult to let non-HTML-trained personnel maintain pages.
  2. It adds "bandwidth requirements" in the form of a lot of extra page text that has to be transmitted over the net. In some cases old HTML page files can be reduced by over 60% in size by conversion to CSS!
  3. It becomes very expensive to do a complete site make-over periodically to maintain visitor interest when each and every page must be visited by the staff maintainers to update all the <font> and <i> tags buried in them.

Enter CSS, "Cascading Style Sheets". A style sheet is a list of special instructions that tell the browser how to display content. In other words, what headings and paragraphs should look like, how to color the page and text of various types, what font family to use, and so on, according to what basic HTML tag surrounds the content.

For example, let's re-code the above red italic text using a small stylesheet:

Web page:Markup:

This is red italic text.

And here's some more.

 
<head>
<style type="text/css">
.red_italic {
  color: #f00;
  font-style: italic;
  }
</style>
</head>
<body>
<p class="red_italic">This is red italic text.</p>
    :
    :
<p class="red_italic">And here's some more.</p>

We've put a small stylesheet in the <head> of the page that can now be used over and over throughout the page, simply by adding 'class="red_italic"' to the paragraph tag where we want red italic text. That's somewhat fewer text characters than the old HTML way, and when we move the stylesheet off the page into a separate one that any page on the site can use, the savings are multiplied by all the instances of red text on any page in the entire web site.

But wait, you say: what if we want to mix black and red text in a paragraph? In our example, we used a "class selector" -- class selector names are prefixed by a period ("."). This class can be used in conjunction with any tag. To solve your request, let's rename the "red_italic" class to "red" and utilize the emphasis tag (preferred over the <i> tag in XHTML), <em> like so:

Web page:Markup:

This is black text, and this is red italic text, all in the same paragraph.

 
<head>
<style type="text/css">
.red {
  color: #f00;
  }
</style>
</head>
<body>
<p>This is black text, and 
<em class="red_italic">this is red 
italic text,</em> all in the same
paragraph.</p>

Now we're using the <em> to style the font, and the ".red" style class to determine the color. In this way we can make any text anywhere, in any tag, red, simply by invoking the "red" style class.

Those were simple examples. In practice, using separate stylesheets makes web pages look a whole lot simpler than with old HTML <font> tags -- trust me!

<< Forms | Index | Style Selectors >>