Appreciation for the CSS Zen Garden project

Today is just a shoutout to a project which shows how much influence pure CSS can have over the look and feel of a webpage. That project is CSS Zen Garden (http://www.csszengarden.com).

The CSS Zen Garden project presents the same HTML file with different CSS files. Designers who create these CSS files show just how much variation can be achieved with CSS alone (okay, with some very minimal exceptions: I see there are changes to the typekit loaded script to load required fonts and some changes the HTML to point to the ‘next’ and ‘current’ design pages. But overall it is the same HTML and JavaScript).

As well as showing the flexibility of CSS, it also illustrates the separation between semantic content and its presentation. Despite the considerable visual differences between the various CSS designs, a screenreader interpreting the underlying HTML would produce the same results. I find that fascinating.

Color scheme: