Dorward

Cascading Style Sheets

14 June 2004

CSS is a language that is used to describe the look and feel of a markup document — such as a web page where HTML (or XHTML) describes the structure of the text, its semantics and relationships to other documents and CSS provides the paint and polish.

Why CSS?

The best reason to use CSS is that it is less effort (at least, it is once you've learned the language).

By separating the content from the style, you can focus on one thing at a time, and you can let different people focus on different things. Do you have a great content writer, and a great designer? They can be let loose on their own pieces of the project, without having to interfere with each others work.

If you change your mind about how something should look — "Let's make all the body text have a little more line spacing!" — then you can change it, quickly and easily.

CSS has other benefits too. You can provide different styles for different media — give the print version a nice serif font, and take out the site navigation (which is useless on paper), but have the navigation on the screen version along with a crisp, screen-friendly sans-serif typeface.

Save bandwidth for you and your users by having the layout described once, and then used on every page, but cached so it doesn't have to be included with each request. You save a little on your bandwidth bills, and your site is a bit faster for the visitors.

Now hear what other people have to say about why you should use CSS…

CSS tutorials

There are lots of CSS tutorials out there. Some are good, and some aren't. The best ones tend to focus on little pieces of CSS, so I'm going to try to round them up.

First though, a good general guide, which covers most aspects of CSS, is the Opera Web Standards Curriculum. Alternatively, check out The WDG CSS Quick Tutorial. It is quite old, and hasn't been updated with some recent CSS features, but does provide a decent grounding in the fundamentals.

CSS for Accessibility provides a few pointers on using CSS to produce an accessible web page.

Maxdesign has a collection of focused tutorials, which come with lots of helpful examples. The gems of the collection are Floatutorial, which describes the float property — a powerful tool for controlling the alignment of elements and how content flows around them — and Listutorial, which describes various techniques to style lists of things — essential reading if you want an attractive menu.

On the subject on menus, the tagcloud has become a popular way of displaying a menu of items of varying importance. Marking Up a Tag Cloud explains how to do it — the right way.

The Z-Files describes how to position content that overlaps other content

The Elements of Typographic Style Applied to the Web does exactly what it says on the tin. It takes the book of the same name, and describes how to implement the guidance in it using HTML and CSS.

Print Media CSS explains how you can write different style sheets for different types of media.

The hardest thing about CSS is Microsoft Internet Explorer (at least until version 8 and its rivals crush version 7 and earlier forever), and there are four things you need to know about dealing with that sorry excuse for a web browser.

  1. The Doctype used may or may not trigger standards mode, and without standards mode, MSIE won't even get the CSS width property correct. Activating Browser Modes with Doctype explains in more detail and has a handy guide to picking the Doctype that is right for you.
  2. Conditional comments are a convenient way to provide custom CSS to various versions of IE.
  3. The hasLayout property is an IE concept that is shrouded with mysterious Voodoo. Applying it can fix problems as if by magic. On having layout and IE hasLayout explain the principles.
  4. There are lots of bugs in IE, so it is helpful to have a list of some of the more common ones to help you when you run into trouble. Such a list can be found at Explorer Exposed!.

CSS references