CSS Zen Garden is an interesting initiative launched in 2003 to demonstrate the benefits of using Cascading Style Sheets (CSS).

With the same fixed HTML code, many web designers have contributed different CSS files that produce a dramatically different web page, with the same contents.

CSS Zen Garden is a website created in 2003 by Dave Shea.

Half manifesto and half gallery, according to his own words, CSS Zen Garden appeared as a reaction to the elementary and uninspired use of Cascading Style Sheets that was usual at that time.

The idea was to create an elementary and unmovable HTML code and ask designers, programmers and web creators in general to contribute different CSS files to visually format said HTML code.

HTML is a page description code, logical support of any web page. It was created to provide web pages with a logical structure, not to visually format them.

In the 90s the proliferation of web sites, along with that of browsers each one having different properties and ways to interpret HTML had created a certain chaos where coding a web page that could have the same appearance in different browsers was a sort of heroic deed. (still today it has its intricacies)

A web designers organisation called "The Web Standards Project" began to work with browser manufacturers to align their software (that showed important differences for the same HTML page) with the recommendations of the "World Wide Web Consortium" or W3C.

A little about CSS
One of the foundations of intelligent programming of graphical interfaces has always been to separate the contents from the appearance it's given, the contents from its shape.

This means that the whole code giving functionality to the program shouldn't contain graphical sentences referring to the way it's represented, they should only contain references to its structure.

For example, in the HTML code:

<blockquote>This is a cite reference</blockquote>

"blockquote" makes reference to a block of text that corresponds to a citation of another text.

In other words it's a way to structure a sentence of a document, that doesn't specify the font or size of the letter or which colour they have to show.

Oddly enough, since many browsers indented this type of paragraph, <blockquote> it has been used regularly to produce the visual effect of indentation instead of being used for its original purpose.

If we don't respect that programming principle, each time we change our opinion about, for example, which colour has to show a third level title, we'll have to scan for all the pages that contain that code in order to change it to the new colour, something that can easily become a nightmare.

Furthermore this hugely limits the flexibility of our designs.

The outcome of the work done by the above mentioned groups provided several standards for HTML and, particularly, the specification of Cascading Style Sheets.

By adding some identifiers in HTML tags like, for example "class" and "id" it's possible to define that an HTML tag is of a special, user defined class. That way

<blockquote class="literature">In a place in La Mancha...</blockquote>

indicates that structurally speaking, what lies between "blockquotes" is a literary citation.

In a different file you can define which visual formatting you will provide the different appearances of class and id so that we effectively separate shape from contents.

Even if we find the above shown literary citation class hundreds of times in many different pages of our web site we'll only need to change the definition of the appearance in the CSS file to change the appearance immediately in all its occurrences.

Zen Garden again
CSS was being used in the beginning of the century for purposes more related with web page programming than with their visual design and the efforts to show its power to manage the visual appearance of a web didn't reach the graphical designers.

In Dave Shea's mind an idea began to take shape: if there existed a repository of excellent graphical works based in CSS, designers would realize its potential by having examples to evaluate.

With this purpose he created CSS Zen Garden in 2003. CSS Zen Garden consist of only one page with not a very long code that explains what it is and inviting anyone wishing to contribute a CSS file to give it a format to the its code. There are links to the existing contributions.

The results are spectacular in some cases. In all of them it has been demonstrated the huge flexibility and power of CSS and the skill of the designer to use their features.

There are more than 700 contributions, i.e., style sheets.

Each one produces what appears to be a completely different web page, the only thing is that it has exactly the same HTML contents.

More important still, by reviewing the code of the different style sheets you can learn a lot about how to use this technology of indispensable use in any serious website.

CSS Zen Garden is a gallery of real wonders of web page design where you can get inspiration for new designs, learn how to properly distribute the elements of a page, using the right typography, create special effects by using advanced CSS or simply discover the vast possibilities of cascading style sheets.

*****************
Original article:
"Cascading Style Sheets Zen Garden"
published by Juan C. Dürsteler
© J.C. Dürsteler 2000 - 2005 Barcelona, Spain

Reprinted here with permission.

http://www.infovis.net

Subscribe to the free InfoVis newseletter here.