CSS/XHTML Resources

This page is the result of a Cascading Style Sheets (CSS) workshop at Access Space held in September 2003. The workshop looked at using CSS for all aspects of web-page presentation and styling - including tableless page layouts.

As a result, this very page is a showcase of CSS positioning: no tables here... check the page source and see! (you could also take a peek at the style sheet for this page)

Anyway, the main purpose of this page is to make available all the materials and resources from the CSS workshop, so without further ado...

The Workshop

Workshop Notes (PDF file)
This PDF file is a write-up of my trainer's notes from the CSS Workshop at Access Space.
Demo Site - Eat Yer Greens
Eat Yer Greens is a fictional organic food supplier, and this website was written for the workshop to showcase some basic CSS techniques.

Other Resources

W3C CSS Homepage
The World Wide Web Consortium's CSS homepage.
CSS Layout techniques at Glish.com
Hot tips and examples for tableless CSS layouts.
The Layout Reservoir at BlueRobot.com
More tableless layouts to twist to your own purposes.
CSS Edge - bleeding edge CSS technology!
A fascinating showcase of the outer limits of CSS design. Make sure you've got a good CSS compliant browser for this one (i.e. Mozilla 1+ or Opera 7)
From Web Hacks to Web Standards - a web designer's journey (Zeldman)
An excellent column extolling the virtues of CSS positioning over table-hacks.
Box Lessons at TheNoodleIncident.com
More positioning examples, building beautifully from simple to complex.
CSS Tableless Sites - resources
Another list of CSS resources - some repetition with this list, but some other stuff too.
Links to CSS resources at WestCiv (makers of CSS editing software for Windows)
WestCiv make proprietory software. But they're not all bad - they've got some good free CSS tutorials too.
Positioning Properties.
An article written by Nigel Peck of MIS Web Design. A comprehensive reference guide to CSS positioning properties. See also his simpler tutorial on margins, borders and padding.
Position Is Everything
Big John shows us how to do layout with floats and absolute positioning and work around browser bugs.
CSS Zen Garden
This is a project where graphic artists invent many beautiful styles for one single HTML file. Participation is open. Anyone up for creating an Access Space entry?!
Inknoise CSS layout generator
If at first you don't succeed, cheat! This is an easy form to generate a complete style sheet for a 2- or 3-column layout, including various work-around for browser bugs.