Cascading Style Sheets

Resources for getting started with Cascading Style Sheets

This is a collection of links I have gathered as an introduction to CSS.

• Why CSS?
• Tutorials
• References
• Templates
  • Page Templates
  • Section Templates
• Examples

Why CSS?

• Design Rant

CSS Tutorials

• Hands On CSS Tutorial
• Complete CSS Guide
• WDG CSS Quick Tutorial (Note that some of the material here is somewhat out of date)
• Flexible Layouts with CSS Positioning
• CSS Layers
• Listutorial (Older: Taming Lists) - how to style lists (at the time of writing the menus on this site used a variation of the techniques described here).
• Print Media CSS
• CSS Rollovers
• Custom CSS - serving up custom css for different browsers.
• Round Corners

CSS References

• Official CSS 2 Specification
• WDG CSS Reference (covers CSS 1 only)
• Hiding CSS from some browsers

CSS Templates

Page Templates

• The Noodle Incident Box Lessons has a collection of n-column designs using all sorts of hacks to persuade buggy browsers (like MSIE) to render them properly.
• Blue Robot Layout Reservoir has a number of basic layouts.
• Glish CSS Layout techniques include a 4 column, all fluid design.
• Real World Style headers, footers, columns, thumbnails and forms - with Netscape 4 friendlyness!
• Craig Salias Layouts include 3 column NS4 compatible designs
• Project Seven Layouts two columns and a header
• Ben Meadowcroft's templates include the usual standard ones along with some that are rather different.

Section Templates

• Listamatic - styles for lists, including ,menus.

CSS Examples

These sites use CSS for their layout.

• CSS Zen Garden features many very different designs, all using the same HTML.
• Cinnamon Interactive just looks fantastic.
• 6 Weather Lawrence along with the redesign write up
• Adaptive path has some smart rollover effects.
• Netscape devedge
• David Mackay, clean, and very user friendly.
• Wired News, leading technology magazine.
• Fast Company
• Jonathon Delacour: the heart of things
• Emptybottle.org, a design I don't actually like (at all), but it shows off some features of CSS that aren't seen too often.
• Davezilla
• Little Yellow Different
• UKonline gov.uk, all CSS but suffers from a few design flaws and a horrible level of nested divs.

Also see Eric Meyers CSS Edge for some very impressive CSS demos, unfortunatly many of them fall over in Internet Explorer (due to the limitations of that browser).