Cascading Style Sheets
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:
Some older documents might prove useful as well: