home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeCascading Style Sheets: The Definitive GuideSearch this book

1.2. 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.

1.2.1. 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.

1.2.2. 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.

1.2.4. Cascading

And that's not all! CSS also makes provisions for conflicting rules; these provisions are collectively referred to as the cascade . For instance, take the previous scenario in which you're importing a single style sheet into a whole bunch of web pages. Now inject a set of pages that share many of the same styles, but also have specialized rules that apply only to them. You can create another style sheet that is imported into those pages, in addition to the already existing style sheet, or you can just place the special styles into the pages that need them.

For example, you might have one page out of the 700 where headings should be yellow on dark blue instead of white on gray. In that single document, then, you could insert this rule:

H1, H2, H3, H4, H5, H6 {color: yellow; background: blue;}

Thanks to the cascade, this rule will override the imported rule for white-on-gray headings. By understanding the cascade rules and using them to your advantage, you can create highly sophisticated sheets that come together to give your pages a professional yet easily changed look.

This ability is not confined to just the author. Web surfers (or readers) can, in some browsers, create their own style sheets (called reader style sheets , oddly enough) that will cascade with the author's styles as well as the styles used by the browser. Thus, a reader who is color-blind could create a style that makes hyperlinks stand out:

A:link {color: white; background: black;}

A reader style sheet could contain almost anything: a directive to make text large enough to read, if the user has impaired vision; rules to remove images for faster reading and browsing; even styles to place the user's favorite picture in the background of every document. (This isn't recommended, of course, but it is possible.) This lets readers customize their web experience without having to turn off all of the author's styles.

Between importing, cascading, and its variety of effects, CSS becomes a wonderful tool for any author or reader.

1.2.6. Preparing for the Future

HTML, as I previously pointed out, is a structural language, while CSS is its complement: a stylistic language. Recognizing this, the World Wide Web Consortium (W3C), the body that debates and approves standards for the Web, is beginning to remove stylistic tags from HTML. The reasoning for this move is that style sheets can be used to create the effects that certain HTML tags provide, so who needs them?

As of this writing, the HTML 4.0 specification has a number of tags that are deprecated; that is, they are in the process of being phased out of the language altogether. Eventually, they will be marked as obsolete, which means that browsers will be neither required nor encouraged to support them. Among the deprecated tags are <FONT>, <BASEFONT>, <U>, <STRIKE>, <S>, and <CENTER>. With the advent of style sheets, none of these HTML tags are necessary.

As if that weren't enough, there is the very strong possibility that HTML will be gradually replaced by the Extensible Markup Language (XML). XML is much more complicated than HTML, but it is also far more powerful and flexible. Despite this, XML does not, of itself, provide any way to declare style tags such as <I> or <CENTER>. Instead, it is quite probable that XML documents will rely on style sheets to determine the appearance of documents. While the style sheets used with XML may not be CSS, they will probably be whatever follows CSS and very closely resembles it. Therefore, learning CSS now will give authors a big advantage when the time comes to make the jump to an XML-based Web.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.