CSS Positioning and Visual Design

The table-based approach to layout that you learned in 320/741 (or on your own) was cutting edge back when David Siegel pioneered it back in 1997. But browsers have come a long way since then, and markup has evolved to match that.

Using tables for layout has two major problems. The first is that it ties together content and presentation, which are two components that are best left separate. The second is that it results in bloated, slow-loading code.

We'll discuss the importance of separating content and presentation, as well as the specifics of the CSS box model and cross-browser challenges for CSS-based positioning.

Readings on Visual Design

• Boxes & Arrows: Visible Narratives: Understanding Visual Organization
• Web Page Design for Designers: Taming the Electronic Page

Useful color tools:

• Man In Blue: Technicolor Tool
• Hex Color Chart: Visibone
• Colour Tools Roundup

Readings on Typography and CSS Formatting

• Web Page Design for Designers: Typography
• A List Apart: Typography Matters
• A List Apart: The Trouble With EM 'n EN (and Other Shady Characters)
• The Noodle Incident: Sane Text Sizing

And a how-to for CSS text properties:

• CSS Guide: CSS Properties

Readings on CSS Positioning

• David Siegel: The Web Is Ruined and I Ruined It
• Bill Merikallio: Why Tables for Layout is Stupid
• Brainjar: CSS Positioning
• Relatively Absolute @ The Autistic Cuckoo - a very clear explanation of the difference between relative and absolute positioning, as well as the default (static) positioning and use of float properties.
• a list apart: In Search of the Holy Grail
• a list apart: CSS Design: Going to Print

css tips & tricks site

The "24 Ways" sites for 2005 and 2006 have a lot of really nice tutorials on nifty effects for your web site, most of which involve CSS.