RSSGoogle Plus

CSS Zen Garden

Zen Garden highlights one of the main features of CSS.

I love Zen Garden. I think its brilliant. I found out about it a few years back when I first started properly dabbling in Web Design, breaking away from using ugly and often confusing tables for all my designs and getting my hands dirty in CSS (Cascading Style Sheets).

CSS Zen Garden Homepage

To be honest, when I first came across it I wasn’t overly bothered, I didn’t quite understand its purpose, but it turns out its pretty simple.

Zen Garden says:

“There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.”

CSS Zen Garden Example 1

Without trying to get too geeky and possibly alienating some people, Zen Garden highlights one of the main features of CSS.

In the past if you wanted to change, for example, the way all of your headers were displayed on a page, you would have to go through each individual item on each page and manually change it, which takes time and is prone to error! Using CSS you change one thing, once, and the rest is done for you! This works for whole webpage layouts though, not just little details like headers.

CSS Zen Garden More examples

This is where Zen Garden comes in. They give you the HTML coding and the CSS ‘stylesheet’ for the website, and invite you to change the whole website using just CSS. Some of the designs that have been submitted have been quite amazing. I’ve often seen it said that submitting a layout to Zen Garden is often regarded as a ‘right of passage’ for web designers.

CSS Zen Garden Example 2

Anyone that is looking to dig deeper into web design, I would urge you to look into the amazing things you can do with CSS, assuming you havn’t already. No doubt you will come across Zen Garden in your travels much in the same way I did.

Website: http://www.csszengarden.com/

Some examples of user-submitted CSS files in action:

Posted on
About me

Hi, I'm Mark Hesketh. I'm a freelance web designer and developer from Lancashire, England.

This is my journal of inspiration, discoveries and thoughts while working on the web.

Say hello
My stuff around the web