Cascading Style Sheets

New listings!

The W3C invented Cascading Style Sheets (CSS) in 1996 to increase the presentational sophistication and the accessibility of websites, and to eliminate the browser-specific markup that threatened to fragment the emerging web. In 1997, some browsers began to support parts of CSS-1, but the standard did not become truly usable until 2001. Today, with standards-compliant browsers dominating the market, there is every reason to use CSS to remove invalid markup from your sites, separate style from content, lighten the bandwidth of your pages, and increase the odds that people and devices will actually be able to access the sites you create.

The CSS Homepage at W3C is the mothership, with links to tutorials, test suites, core styles, authoring tools, the free CSS validator, and of course the official specs.
WestCiv maintains a free online CSS Guide that is informative, detailed, and helpful.
A List Apart’s Web Designer’s Journey ... making the transition from HTML table-based layouts to clean CSS design.
A List Apart provides working developers with a “No-Fault CSS” Plan in Fear of Style Sheets, and further details in Fear of Style Sheets 2, Fear 3, and especially Fear 4, which explains how workarounds for old cross-platform differences fail in newer, more standards-compliant browsers ... and what you can do instead.

If you’re new to CSS, or confused by it, read this stuff before you read the official CSS-1 and CSS-2 specs. (The specs are the real deal, but they’re not always easy to understand without a little background info.)

Browser comparisons, charts, references:

SelectORacle ... turns CSS-2 selectors into English. Confused about what div>h1+*#text a[title~="W3C"][class="external"]:visited:hover means? Wonder no more.
CSS2 tests ... what the new css declarations mean, how they’re supposed to work, which browsers support them, and which don’t.
The WebReview CSS Reference Chart is a rough guide to CSS issues, and shows the kinds of incompatibilities that brought WSP together in the first place (updated link). WARNING: Big file, long load time. But worth it.

To help guide you through the various browsers:

CSS Samurai Top 10 ... the classic “top 10 css problems” report from The WaSP’s CSS Samurai, 1998-1999.
Size Matters: Working around screwy inheritance models. Fahrner puts accessible CSS font size keywords to work.
agitprop ... Todd Fahrner’s seminal writings on css and text styling on the Web. Anyone who even pretends to design websites should read this stuff several times over.
Tantek Çelik’s CSS box model hack works around quirks in IE5/Win, IE4.5/Mac, and IE6/beta.

Want some CSS templates to help make life easier? Here are some to get you started:

BlueRobot’s CSS Layout Reservoir ... elegant css layouts, yours for the taking.
Glish’s CSS Layout Techniques ... look, Ma, no tables! Grab and run, or linger and learn. Similarly: Glish’s CSS Layouts: The Good, the Bad, and the Ugly discusses problems (and workarounds) in CSS browsers.
Owen Briggs’s Little Boxes visual layouts page ... click a layout, view the css that built it. Similarly, Owen Briggs’s Box Lesson Problem & Workaround Set documents browser bugs and offers possible workarounds.

Some older documents might prove useful as well:

Yuriko Ienaga provides a complete list showing which browsers support which CSS elements at www.ncdesign.org/html/sindex.htm.
CSS Bugs and Workarounds in IE3, IE4 and NN4 from the CSS Pointers Group. We’re not necessarily recommending the workarounds, but the bug list itself does a wonderful job of finding and describing problems in current implementations.
CSS in IE4 includes a discussion of IE3/4 compatibility issues and MS’s CSS support chart.
Netscape’s official CSS bug page for NS 4.0. Obviously, this is old information, but it may come in handy until all Netscape users have upgraded to the standards-compliant 6.0 version.