A Tribute to Dave Shea's CSS Zen Garden

The CSS Zen Garden

The CSS Zen Garden is a website developed by Dave Shea. It can be viewed at http://www.csszengarden.com. Dave developed the site to show the powerful formatting that can be accomplished with CSS alone.

How It Works

The CSS Zen Garden is a collection of web pages, all of which look very different. As you read each page, you will notice that each one repeats the same text and contains the same hyperlinks. How does that happen? Simple, every page uses the exact same .html file! That means that all the text and links in the .html file show up on every page. So why do they look so different? For each page, the .html file links to a different .css file. The page authors use CSS properties such as background images, font styling, and positioning to format each element on the page. The use of different images, colors, locations, etc. dramatically changes the look and feel of the .html page.

What We Did

For the website that you are viewing right now, we modeled the idea developed by Dave Shea. Each of our pages use the exact same .html page but we created our own distinct .css files. As you look at each person's page, the look and feel will change, but the text and links will not.