|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
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.
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:
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
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:
Now we have an image in the background of the
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
This has to be done for every heading of level two. If you have
forty headings in your document, you have to insert forty
But let's assume that you've gone ahead and put in all those
It would be much better to have a single rule instead:
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
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
Now the styles apply to both
If you want to change the way
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.