Zen and the art of Cascading Style Sheets

“Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support. … Today, we must clear the mind of past practices … The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.”

So begins the home page of the css Zen Garden (see links below), a site dedicated to the correct and effective application of Cascading Style Sheets (CSS). The author, Dave Shea, a Web designer from Vancouver, Canada, contends that CSS is widely misunderstood if not massively abused.

The site’s home page is definitely worth checking out: On the right hand side of the default page there is a list of alternative style sheets that were submitted by other designers. As you select each in turn the home page is reformatted according to that CSS specification (the CSS menu moves to different locations in many of the examples).

What is really striking about these demos is how different the look and feel of the page becomes simply by changing style sheets – it is one of the best examples of the power of CSS I’ve seen. Take a look at the “raw” home page – it really shows how basic the layout is without a CSS applied.

The examples – which are well documented – mostly use only CSS1 and where CSS2 is used, Shea asks that the designer limit their use to “widely-supported elements only” (as he notes: “The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public”). On the other hand, he also says that “the only real requirement we have is that your CSS validates.”

Also of great value is the site’s resources page which refers to one of the best CSS tutorials I’ve come across: The Western Civilisation’s “Westciv Complete CSS Guide.” A very interesting feature of the guide is the analysis of various browsers’ support for specific CSS features (click on the section headings to go to the related analysis table).

Finally, check out The StrangeBanana Generator by Torben Kjær, a Web developer in Copenhagen, Denmark. The StrangeBanana Generator generates random CSS designs and much to my surprise, many of them don’t look too bad – this could be a jumping off point for your next Web site design using CSS if you’re feeling creatively blocked.