Cascading Style Sheets: HTML and CSS
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

CSS to the Rescue

Of course, the problem of polluting HTML with presentational markup was not lost on the World Wide Web Consortium (W3C). It was recognized early on that this situation couldn't continue forever, and that a good solution was needed quickly. In 1995, they started publicizing a work-in-progress called CSS. By 1996, it had become a full Recommendation, with the same weight as HTML itself.

So what does CSS offer us? As of this writing, it offers us two levels of itself. The first level is Cascading Style Sheets, Level 1 (CSS1), which was made a full W3C Recommendation in 1996. Soon thereafter, the W3C's Cascading Style Sheets and Formatting Properties (CSS&FP) Working Group got to work on a more advanced specification, and in 1998 their work paid off when Cascading Style Sheets, Level 2 (CSS2) was made a full Recommendation. CSS2 builds on CSS1 by extending the earlier work without making major changes to it.

The future is likely to see further advances in CSS, but until then, let's go over what we already have.

Rich Styling

In the first place, CSS allows for much richer document appearances than HTML ever allowed, even at the height of its presentational fever. CSS contains the ability to set colors on text and in the background of any element; it permits the creation of borders around any element, as well as the increase or decrease of the space around them; it allows authors to change the way text is capitalized, decorated (e.g., underlining), its spacing, and even whether or not it is displayed at all; and many other effects.

Take, for example, the first (and main) heading on a page, which is usually the title of the page itself. The proper markup is:

<H1>Leaping Above The Water</H1>

Now, suppose you want this title to be dark red, use a certain font, be italicized and underlined, and have a yellow background. To do all of that with HTML, you'd have to put the H1 into a table and load it up with a ton of other tags like FONT and U. With CSS, all you need is one rule:

H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; 
   background: yellow;}

That's it. As you can see, everything we did in HTML can be done in CSS. There's no need to confine ourselves to only those things HTML can do, however:

H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; 
   background: yellow url(titlebg.png) repeat-x; 
   border: 1px solid red; margin-bottom: 0; padding: 5px;}

Now we have an image in the background of the H1 that is only repeated horizontally, plus a border around the H1 that is separated from the text by at least five pixels, and we've removed the margin (blank space) from the bottom of the element. These are things which HTML can't even come close to matching--and that's just a taste of what CSS can do.

Ease of Use

If the depth of CSS doesn't convince you, then perhaps this will: style sheets can drastically reduce a web author's workload.

Style sheets can do this by centralizing the commands for certain visual effects in one handy place, instead of scattering them throughout the document. As an example, let's say you want all of the headings in a document to be purple. (No, I don't know why you would want this, but assume with me.) Using HTML, the way to do this would be to put a FONT tag in every heading tag, like so:

<H2><FONT COLOR="purple">This is purple!</FONT></H2>

This has to be done for every heading of level two. If you have forty headings in your document, you have to insert forty FONT tags throughout, one for each heading! That's a lot of work for one little effect.

But let's assume that you've gone ahead and put in all those FONT tags. You're done, you're happy--and then you decide (or your boss decides for you) that headings should really be dark green, not purple. Now you have to go back and fix every single one of those FONT tags. Sure, you might be able to find-and-replace, as long as headings are the only purple text in your document. If you've put other purple FONT tags in your document, then you can't find-and-replace, because you'd affect them too.

It would be much better to have a single rule instead:

H2 {color: purple;}

Not only is this faster to type, but it's easier to change. If you do switch from purple to dark green, all you have to change is that one rule.

Let's go back to the highly styled H1 element from the previous section:

H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; 
   background: yellow;}

This may look like it's worse to write than using HTML, but consider a case where you have a page with about a dozen H2 elements that should look the same as the H1. How much markup will be required for those 12 H2 elements? A lot. On the other hand, with CSS, all you need to do is this:

H1, H2 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; 
   background: yellow;}

Now the styles apply to both H1 and H2 elements, with just three extra keystrokes.

If you want to change the way H1 and H2 elements look, the advantages of CSS become even more striking. Consider how long it would take to change the HTML markup for all H1 and 12 H2 elements, compared to changing the previous styles to this:

H1, H2 {color: navy; font: bold 1em Helvetica, sans-serif; 
   text-decoration: underline overline; background: silver;}

If the two approaches were timed on a stopwatch, I'm betting the CSS-savvy author would handily beat the HTML jockey.

In addition, most CSS rules are collected into one location in the document. It is possible to scatter them throughout the document by associated styles to individual elements, but it's usually far more efficient to place all of your styles into a single style sheet. This lets you create (or change) the appearance of an entire document in one place.