The Power of CSS

Playing around with WPF makes one thing clear: Applications are about to become a whole lot prettier. Which itself implies that the design - the look and feel - is likely to become increasingly important for every application in the same way that you expect web pages to be more that just standard buttons and shades of grey.

A source of real inspiration for me has been the fabulous site, a showcase for web designers to show their imagination. If you haven't come across this before it's certainly worth a look. Sure this is the web and not WPF but the principals of design apply. So, a little background:

Back in 2002, designer Dave Shea was thinking about how to get graphic designers interested in the use of CSS to lift web pages beyond the boring, functional examples that littered the worldwide web. In May 2003 his idea became reality with the launch of CSS Zen Garden, a website that allowed designers to see and be inspired by the power of CSS as a tool for transforming websites.

It works like this: Shea came up with a simple page of pure HTML, with no real formatting or design within it. Designers were not permitted to change the HTML page - and indeed it remains constant to this day - but instead had to create an accompanying CSS file that encapsulated the formatting for the page. So the idea was not to create a useful piece of HTML, as that was unchangeable, but instead to demonstrate the power of CSS.

Today, there are hundreds of CSS samples that you can use to view the CSS Zen Garden site. The variety is truly astonishing. Here are some of my favourite examples, and remember they all use the identical HTML page, only the CSS file changes:


I Dream in Color

Lonely Flower

Pseudo Sahara

Storm Weather


Wicked Grove

Check out the full list here:

Shea has since published a book, "The Zen of CSS Design", along with Molly E. Holzschlag that dissects a number of the designs and acts as a great reference for budding CSS designers. I can absolutely recommend it.

All in all, inspiring stuff.