What Makes CSS So Great

O’Reilly Network
July 2000

If there's one thing which characterizes what's gone awry with the Web, it's the proliferation of presentation at the expense of structure and content. Note that I don't say presentation is bad: there is nothing wrong with having a document look nice. The problem is that current presentation is achieved by perverting the structure with single-pixel GIFs, convoluted tables within tables, and semantically null constructs like the FONT tag. What were we thinking?

We were thinking of our audience, that's what. If you're going to put information out there, it may as well look good. We all take pride in our work and want it to look as good as we think it is. Since HTML gave us very little in the way of interesting presentational abilities, we forced it into the channels we wanted to travel. If we'd had good styling to begin with, the corruption of the Web's underpinnings wouldn't have been necessary.

That's why CSS is so important. Finally, not only do we have the ability to describe sophisticated presentation, we can do it in relation to well-structured, uncluttered documents. No more tortured markup! Just clean elements which are attractively rendered through CSS.

That's the most fundamental-- if you like, the most pure-- reason to embrace CSS. In reality, this road to minor nerdvana has been blocked by implementation disasters. The earliest browsers to support CSS did so very badly. They gave CSS support its start, admittedly, but the behavior was so unreliable that nobody did rely on it. And well they should have not. The next round of browsers did better, but not really enough to gain widespread support.

It's only been recently that CSS has become a viable component of the designer's toolbox. With Opera 3.6 and Internet Explorer 5, we saw nearly-complete CSS1 support. IE5 for the Macintosh, especially, fulfilled this goal, with complete and correct support for everything in CSS1 except for blinking text (no great loss) and a few minor bugs in the float code. Opera 4 appear to have continued the work of earlier versions into most of CSS2, and Mozilla's recent builds have contained very good CSS2 support.

So if you've been holding out on CSS adoption, it's time to come in from the cold. Thanks to some impressive efforts on the parts of the big three browser vendors, you can learn to bask in the warmth of CSS without getting burned.

Advantage: You

We've already covered the fact that CSS lets you separate presentational information from your documents. Great, wonderful, but why is that such a big deal? The more structurally pure your documents, the easier it is to convert into other forms via simple scripts. If you can concentrate simply on the structure, converting to WML or custom document types is a snap. In fact, if you approach document structure intelligently, you don't even need scripts. You can just serve up the same structure in different media by using different styles.

How about the design side? To quote Tantek Çelik, Development Lead for Tasman and Personal TV Technologies at Microsoft, "I use CSS because I want precise control over the presentation of my documents, in a way which can be dynamically altered, yet is expressed in a human readable language." It's almost infinitely easier to change the color of table headers, or the size of headings, through CSS than it is in FONT-based HTML. With the usual HTML approach, your presentational information is scattered throughout the document, and it's usually done in a haphazard way. In CSS, the presentational information is collected in one place, and it's easy to read and edit.

Even better, of course, is the ability to collect the style information for an entire Web site into one file. The editing of that file affects the presentation of the entire site. The power this confers on authors is like nothing we've ever had before. Even in dynamically-generated sites, editing templates and scripts to change the page's appearance is a headache. CSS dramatically simplifies that process. As Web designer Jeffrey Zeldman has observed, 'On a traditional site, updating the look of the site, or correcting for a typographic problem, can take hours, even days; with CSS, it's a matter of minutes."

All told, the use of CSS makes your life easier, permits you to reach more audiences, and gives you more power than ever. What's not to like?

A Better Web For All

Look to the future-- what do you see? For the Web, we're expecting the continued growth of XML to deliver information. And why not? XML allows for rigid structure in a flexible way, since it's possible to create your own markup language and still have it be understood by anyone else. However, XML really only addresses the structure of documents. There is nothing whatsoever about presentation in XML.

And that's where CSS comes in. By using CSS to describe the presentation of XML documents, we get the best of both worlds: pure structure and sophisticated presentation. The possibilities are almost literally endless.

For example, the entirety of Mozilla user interface-- that is, the browser chrome itself, the part outside the document window-- is laid out using XML and CSS. At the moment, there is no more profound expression of the power of XML and CSS combined. The fact that an application's UI can be described using XML+CSS should give us an idea of how far authors can go with this combination of technologies.

The payoff here goes even further than being dazzled by the layout possibilities. Because the Mozilla interface is styled using CSS, it's actually possible to change the browser's look using CSS. Don't like the colors of Mozilla's interface? Change them with a stylesheet of your own. Think the fonts used should be bigger, or smaller. Take control! Change the browser without throwing it away. The power is there.

Of course, that power extends into the documents you view. With user stylesheets, it's possible to alter the appearance of everything you see on the Web. If you have poor vision, you can set up a user stylesheet which increases the size of text to a level that's comfortable for you. If you're colorblind, you can set up styles which highlight hyperlinks in a way you can see as easily as most people can see the traditional blue text. Best of all, you can do this without worrying about authors overriding your styles, because reader styles can be made to always win, no matter what.

Designers can turn these features to their advantage as well. By writing use stylesheets which serve as diagnostic tools, it's much simpler to figure out how tables are structured, for example, or where FONT-era markup still lurks in a project's markup. In other words, not only does CSS make your life easier in maintaining a site, but also in diagnosing problems with it.

That's the good side, of course. You can also give into your darker impulses and employ user stylesheets in an almost atavistic manner, by completely overrunning the intended presentation of other sites. You could blank out FONT text, or perhaps filter out ad banners. The opportunities for subversion are almost unbounded, and yet it's something which only you need experience. Nobody else has to know...

The best news of all? User stylesheets are supported in Opera, Internet Explorer, and Mozilla. You pretty much can't pick a current browser which doesn't support them, so they're always there for you.

Give In and Be Glad

Although CSS has long suffered the stigma of crippling bugs, this is no longer a concern. Like people who deride the "Crashintosh" without actually having used a Mac in the last few years, perceptions of CSS haven't caught up with the reality. Browser support is not only getting close to bug-free, but it's steadily improving in terms of stability and coverage. There is a very good body of information about CSS and how to use it available (including my own effort). CSS is a profound and powerful tool, and it's improving the lives of more and more Web authors every day. Join us, won't you?

Useful Resources