Cascading style sheets (CSS)
Last updated: 30.07.2007.
The Basics of CSS
The basics of Cascading Style Sheets (CSS) according to the noodle incident.com.
The Challenge
"In a way, I don't think people realize that CSS is at an experimental stage. Layout structure is not understood with the same finality that we've had with tables for a few years. We're back to innovating and discovering with layout, not just design." (August 30th, 2002)
By Owen Briggs, at his 'inflight correction'. And from Zeldman:
"Basic CSS is the easiest web technology you'll ever learn.
What's not so easy at first is using CSS to replicate the kinds
of designs we've learned to create with tables."
(October 2002)
Borrowable, ready-made CSS layouts [highly recommended]
- Liquid two-column layout in 15 steps from the suave and accurate MaxDesign.com.au;
- Liquid three-column layout in 15 steps from the suave and accurate MaxDesign.com.au;
- Glish.com's stylesheet layout tutorials;
- Some excellent, borrowable stylesheet layouts from Bluerobot.com;
- A three-column, NN4-compatible version from 'IBlogAtMac.com';
- 'Little Boxes' from 'thenoodleincident.com';
- ...and not forgetting... the brilliant Waferbaby.com.
CSS advice
- From thenoodleincident.com: "a how-to for dealing with the misinterpretations of our current browsers".
- BrainJar.com: Mike Hall's self-confessed Experiments in Web Programming, which includes excellent advice and examples featuring 'technical articles, tutorials and examples of programming for the web'. Browser-friendly DHTML drop-down menus, very sharp CSS, and more.
CSS tips and tricks
CSS: Floating an image thumbnail gallery
-
From MaxDesign.com.au's Floatutorial: "Floating an image thumbnail gallery".
Object: 'To move all the thumbnails up into rows, like table cells. The method used allows for any number of images to sit beside each other, depending on the width of the containing box'.
CSS: Floating an image and caption
-
From MaxDesign.com.au's Floatutorial: "Floating an image and caption" (See full CSS). Lovely.
Object: 'To force an image over to the right to allow the content to flow alongside it, while retaining a caption under the image'.
CSS: Floating inline list items
-
From MaxDesign.com.au's Floatutorial: "Floating inline list items".
Object: 'To take a simple unordered list and convert it into a horizontal navigation bar'. Beautiful.
CSS: Nested lists and auto-generated content
-
From MaxDesign.com.au's Listutorial: "Nested lists".
Object: 'To open a side navigation list out in order to show subsections within a section'. Beautiful.
CSS: Relative font sizes
- Using relative font sizes, by Diveintomark.org.
CSS starter
- 'CSS: a guide for the unglued' ('Panic Guide'), by Owen Briggs.
CSS books
- The companion website to 'Designing CSS Web Pages', which includes downloadable code listings and example projects.
Resources
- The Floatutorial: "Step by step tutorials on using CSS to create floating images, images with captions, next and back buttons, drop caps, inline lists and more".
From: (CSS)MaxDesign.com.au.
Images
- Tips, tricks and techniques (from alistapart): CSS thumbnails (and forms).
- From CodeAve.com (fixed positioning for images):
