CSS Zen Garden

For years when trying to convey the power and pupose of CSS I’ve deferred to a single example; CSS Zen Garden. I’ve always been so impressed by the demonstation of this project and contributions from designers all over the world. The basis of CSS Zen Garden is to take the exact same HTML content, and without making ANY changes to the HTML, create a completely unique visual design and portrayal of the content.

For those of you who think CSS is merely changing fonts and colors, try out a few examples found on CSS Zen Garden and you will be amazed at the huge range in presentations.

Here are a few of my favorites:

This is Cereal

Bonsai Sky

Blackcomb*75

prêt-á-porter

Table Layout Assassination!

Invasion of the Body Switchers

Shaolin Yokobue

Retro Theater

Care to take a look at the base HTML? Click here to view the HTML without any CSS styling.

CSS Zen Garden: The Book

If you are interested in learning more about the history behind this project, the original creators have released a book which I highly recommend.