Style Templates

As we said back in the section on Graphic Design and Layout, this is like peeking at the answers at the back of the book. Some of these styles are like low hanging fruit, ready to pluck and use. Others take a little work to adapt. And some even let you specify a couple of things on a form, turn a crank, and out comes your styles.

So you've got no excuse for building nasty, unmaintainable web pages any more. Let's get stylin!

Ruthsarian Layouts
Really mature designs here. It's tempting to use them as is, that's how nice they look.
CSS Creator
Select stuff from a form (colors, number of columns, (X)HTML version), push the button, and out comes a CSS template for your page.
CSS Page Maker
From ClevaTreva Designs: fill in the form, out comes your CSSs.
Movable Styles
Fit easily into Movable Type weblogs, but with a little work they could be used on regular websites. Or with much less work you could borrow elements from them. Be sure to read the license terms and do what's right. Note: Scotty Yang who runs this site is trying to give it to someone else at this writing, so you may be redirected.
Mediatinker's Illustrated MT Templates
This is how Movable Type sites are laid out, and what the various division classes are. Essential information if you want to customize your MT blog's appearance.
The Layout Reservoir
At bluerobot.com. Perhaps the most borrowed and adapted layouts in existence. Your basic two-column (menu right or menu left) and three-column layouts.
Open Source Web Design
Designs range from XHTML/CSS to table and font tags. Note that the default for browse shows you old ones first, which are less likely to have CSS, XHTML, or validation. Hundreds of free templates, and the premium ones, which include Photoshop images, are priced very reasonably.
Tabtastic
Imagine a page that displays as a set of tabs and includes all the content for all the tabs, so that the content for each tab magically appears when you click the appropriate tab. If you want to break your content into bite-sized pieces, Gavin Kistner's Tabtastic is a terrific way to do it.
Semantic Tabset
These tabs from Gavin Kistner use <dd> and <dt> tags so they'll degrade gracefully on older browsers.
Strange Banana
This is way too easy. Go to the Generator page, hit refresh until it generates a style you like, then save the page (which will have CSS embedded in the header).
Layoutomatic
At Inknoise. Fill out the form, out comes your CSS.
Firda Beka's Book of Styles
Firda is busy doing work for money (for shame!), but this great resource will be back soon, and you can sign up to get an email when it is.
Column Styles
Super examples of 1-1 menu left, 1-1 menu right, plus another half dozen layouts.
Fluid 2-Column Template
By "Beauregard T. Shagnasty". This is a beautifully usable template. Fluid means this expands and contracts with window size. Fixed width pages can look silly or even become unusable with browser window sizes other than the ones you designed on.
W3C Core Styles
These styles by the World Wide Web Consortium, the folks who are responsible for the standard, are certainly standards compliant, but you need to check them in some common browsers to make sure they don't misbehave in your application.
Real World Style
Besides the templates, they've got some articles, too.
CSS Layout Techniques For Fun And Profit
At glish.com. Check the articles, too.
Ben Meadowcroft's Templates
Licensed with a Non-commercial share-alike license from Creative Commons.
CSS Templates
At CSSIntensiveStation. The site is in German, but the CSS are very clear, and there's some styles we hadn't seen before.
Sensually Styled Display Lists
From Seamus Leahy of Sea Mus N Squirrel. Cool list formatting isn't just for <ul>s. Now <dl>s can play too.
CSS Intensivestation
This Swiss site has a good selection of useful templates, most of them floating -- either the whole page or the larger text section. Same site in German.
The CSS Playground
Stu Nicholls' cutting edge CSS demos. It'll probably take some work to make them do something that doesn't look too awful on old browsers, but if your logs show you've got a modern crowd visiting your website, have a ball!
Any Order Columns
Big John and Holly Bergevin of Position Is Everything proudly present the holy grail for web designers: multiple column layouts where you can present the columns in any order using style sheets only! Eric Meyer adds a timely comment about a recent bug that showed up in the Firefox beta possibly breaking this design.