Sample CSS Styles

The idea for this page was prompted by the site CSS Zen Garden, where a variety of designers remodel a fixed XHTML file by applying CSS styles. The CSS Zen Garden was developed by a Canadian designer, Dave Shea, and is part of a trend toward XHTML/CSS as a replacement for table-driven web site designs. Shea lists some benefits of this approach (more flexible design, standardization, faster page loads because the CSS is cached, etc.), but there are also some problems. The most obvious is inconsistent browser support for the CSS standards.

Maybe because he's primarily a designer rather than a programmer, Shea doesn't mention what I think is the biggest benefit of all. By constraining the page to be strict XHTML and pushing all layout issues to the CSS, the page content is effectively uncoupled from its design. That means there is a clear separation of responsibility for content and presentation. On complex sites this could be a huge benefit.

Because the potential benefits are so significant, I decided to try it out by applying the method to this site (which, like the Zen Garden, consists of very simple pages). All the pages here should conform to the strict XHTML standard. You can check both the XHTML and the CSS with links to the W3 validators at the bottom of each page. As you can see from these samples, I'm no designer, but the exercise of creating them did help me see how various problems might (or might not) be solved.

The Sample Designs


(c) Copyright Penpoints, 2006