Learning CSS With Templates
Monday, March 3rd, 2008Author of this post: Tara MacKay | About Blog Authors »
I know I’ve posted about it once, maybe even twice, but table-based web designers (myself included)… your days are numbered.
I’m always surprised when I see so many web designers using tables for layout, but I can understand it. Most designers started with tables, and while tabled layouts are so inflexible, they’re quick and easy to create. Making the leap to CSS positioning to create layouts means more to learn, and a potential slowdown in your work before you see the true time benefits.
I previously posted about CSS Zen Garden as one way to test your skills, but this works best if you’ve already got some experience with CSS layouts.
If CSS layouts are totally new to you (though I’ll assume that you have some experience with CSS text styling), think back to how you may have learned HTML. One of the best ways to learn HTML, back in the days of simpler sites, was to download an existing page and look at the code. Play with it. See how all those crazy tags worked.
For CSS layouts, you can do the same thing. But the trick is to start with ones that are written correctly. So avoid choosing any random site and downloading its code. Try existing templates from various free template sites.
Freecsstemplates.org is one of many sites that offers downloadable templates that you can play with to learn CSS layouts (or just use as-is for a quick blog design). At this site, all of the templates comply with W3C standards and contain valid XHTML code.

Templates at freecsstemplates.org comes in many layouts and visual styles.
These templates, and others from many different authors, are also available at opendesigns.org. Just download and start experimenting.
Simpler templates, also with valid code, are available at intensivistation.ch. In these, the code is displayed within each content area—this is great if you want to start new docs from scratch and simply copy, apply, and modify the given code.
When working with these templates at first, pay little attention to the graphics and colors—instead, focus on the positioning of page content areas. The content areas (more…)



























