Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

What Makes CSS So Great?
Pages: 1, 2

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

Cascading Style Sheets: The Definitive GuideCascading Style Sheets: The Definitive Guide
By Eric A. Meyer
May 2000
1-56592-622-6, Order Number: 6226
467 pages, $34.95

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.

Useful Resources

CSS Pointers Group -- a vast collection of links to CSS information, documentation of bugs, and workarounds for legacy browsers.

Style Sheets Reference Guide -- includes browser support charts and other information.

The House of Style -- home of some good tutorials and advice on how CSS should and shouldn't be used.

CSScheck -- a friendly CSS validator provided by the Web Design Group; using it is a great way to learn correct CSS.

CSS2 specification -- when in doubt, go to the source.

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 that increases the size of text to a level that's comfortable for you. If you're colorblind, you can set up styles that 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 user stylesheets that 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, CSS makes your life easier not only 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 that 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?

Eric A. Meyer is a member of the CSS&FP Working Group and the author of Cascading Style Sheets: The Definitive Guide.

Discuss this article in the O'Reilly Network Forum.

Return to the O'Reilly Network Hub.