Learn What CSS Can Do at the CSS Zen Garden

The CSS Zen Garden is one of those sites I wish somebody had told me about a long time ago. Basically, they invite designers to show off their CSS kung fu by taking the same HTML file and styling it radically differently. Visitors can switch CSS styling with one click to see the various submissions. This site has enormous value to non-programmers as well as programmers.

If you are a complete beginner then you can teach yourself some basics about the separation between content and styling in today’s HTML. Just use the “view source” function on the “Edit” menu in your browser to look at the HTML code. Don’t worry if you don’t know HTML; there are just a few things you need to observe:

• Any time you see “div”, that means the author of the content wants to set a section of the content apart for its own styling. “/div” marks the end of that section.
• Any time you see “class” that means the author wants to apply a certain generic styling. You can think of it very much like “styles” in Microsoft Word; you might, for example, have a style that you want to apply to all body paragraphs.
• Any time you see “id” that means the author wants to uniquely identify a single item for styling just to that item.

Armed with no more than this information, you can look at the source code and start to get a sense of how to think about your content in terms that will enable you to work with your designer much better. And really, if you just know a small handful of additional HTML tags to mark paragraphs, bold text, and things like that, you’re pretty much ready to start writing content in HTML that looks pretty. Once you agree on conventions with your designers and learn the appropriate CSS tags for your document, you can start writing.

Beyond that, CSS Zen Garden can educate you on the stunning range of what can be done with CSS. The variety of designs is just jaw-dropping. Text moves all over the page. Even behaviors such as rollovers change. Paging through the Zen Garden is a good way to build your design vocabulary so that you can go back to your designers and say, “Give me something like that.”