CSS Zengarden

“You may modify the style sheet in any way you wish, but not the HTML.” (Quote: CssZengarden.com)


The CSS Zengarden Workshop

A zengarden is comtemplative garden where stones and plants are organized in geometrical patterns. Contemplation is a form of mental training. So is CSS.

Zengarden in Monaco (photo: WikiMedia Commons)
Zengarden in Monaco (photo: WikiMedia Commons)

CSS Designers all over the world participate in the Zengarden’s creative challenge. They develop fancy graphic and style the HTML via CSS. You can see their work here.

Zengarden Designs
Zengarden Designs


Well, there are many rules. Try this site.

Spying  – or how to get inspiration from other designers

  1. Right-click on an element in the Chrome browser
  2. Select “Inspect Element”
  3. Yeah … so that’s how they did it …
Chrome: "Inspect Element"
Chrome: “Inspect Element”


Here is the HTML for the Zengarden that you have to style. Don’t change anything here.

I have modified the HTML slightly, so that the CSS url points to style.css in a local folder. The original Zengarden files are here.

  1. Make a folder for your work.
  2. Save the htm file as index.html and the css file as style.css
  3. Create the graphic images needed.
  4. Don’t use the CSS as is – make changes, experiment, go mad, do what thou willt
  5. Save your work in a ZIP file.
  6. Upload your work to Fronter @ the deadline.