If you’re new to Web design, or a veteran who grew up on font tags and tables, you may need some practice with your cascading style sheets (CSS) skills. CSS has long been known to give Web designers more creativity and flexibility over their pages, allowing for precision typography and layout. But it can admittedly be hard to open your mind to all of the possibilities.

CSS Zen Garden is a site that aims to inspire designers to take their CSS skills higher, and is a fantastic educational tool.

The CSS Zen Garden home page

Start out by clicking on the design titles in the right side of the CSS Zen Garden home page (Icicle Outback by Timo Virtanen and Elegance in Simplicity by Mani Sherlar are a couple of my favorites). Notice that each design is a completely different look… but the HTML code and written content is not. Various designers create their own external CSS files that completely alter the appearance of the CSS Zen Garden home page.

After your mind’s been blown by all of the possibilities, you’ll want to set off and create your own CSS design. Simply download the HTML (XHTML, actually) and CSS documents from CSS Zen Garden to get started. You can work in an editor like Dreamweaver, or use this opportunity to improve your hand coding. Remember that you should not change the HTML file at all, only working on the CSS file (or starting with a fresh one) to alter the presentation of fonts, backgrounds, layout positions, links, and more.

The HTML file opened in Dreamweaver with no styles applied

If you’re very new to CSS, start out with some basics: changing text colors, adding some settings to paragraph tags, setting some link attributes. If you’ve got some more experience, work on page layout and link up some new graphics. In either case, take some time to review the HTML so you know what elements you have to work with, and check out some of the CSS from the sample page if you need help writing the code.

Think your CSS has what it takes to get featured on CSS Zen Garden? Read through the requirements right there on the home page, making sure to validate and test your work and use only original work, then visit the Submit page for more information.

This entry was posted on Friday, June 8th, 2007 at 2:39 pm and is filed under Design Careers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.