Easy, professional-looking websites with open source CSS

And, they work well with straightforward XHTML.

Monday night I went to my first meeting of the Neon Guild, an association of local Charlottesville technology professionals. (Web designers seemed to dominate, perhaps due to the theme of this month’s meeting.) I learned something very valuable about web design: that free, open source CSS stylesheets are available at Open Web Design.

[NoProbs thumbnail]

There are additional open source CSS stylesheets (and many of the same ones) at Open Source Web Design, but after a quick skim I saw more designs that I liked at Open Web Design, which offers nearly 1500 to choose from. Each stylesheet comes with an index.html page to demonstrate it, and it’s always a pleasant surprise to see the simplicity of these files. They’re usually valid, vanilla XHTML with basic sections such as the main content, side column, menu, and footer wrapped with div elements that have specific id values to provide a handle to the CSS stylesheet. (Aging SGML alumni might be tempted to shout “We won! People who used to resist the separation of structure from content finally see its value!”)

I looked through the highest-rated ones on the site and ended up taking one called NoProbs, written by a guy in Bangalore who goes by both kpgururaja and Gururaj, and using his CSS stylesheet and index.html model to redo my own home page. If you compare it to my old one, which has been through different color schemes and the same design for several years now, I’m sure you’ll see the improvement. My original one was still a collection of individually edited static pages, and this time I put everything I wanted in one XML file and used an XSLT stylesheet to convert that to the collection of pages with the right div wrappers and div/@id attributes to work correctly with the NoProbs CSS stylesheet. I’m sure the same XSLT stylesheet could create web pages for other Open Web Design CSS stylesheets with only minor tweaks. The XML of pre-transformation content also includes a bit of XInclude to incorporate blurbs from the Atom feeds about this weblog and about my recent XML.com articles.

The whole setup will make it very easy to add a new page and see it show up in the menu or to change details of menu entries without requiring the installation and use of any “framework.” And, if I ever need to put together a slick-looking web site for another project, I know where my first stop will be.