Are there any CSS standards that I should follow while writing my first stylesheet?

Question

I am currently working on my first website. I have no idea where to start on the CSS page, or if there are any standards that I should be following.

I would appreciate any links or first-hand advise.

Answer 1

An error that beginners make quite often:

CSS is semantic as well. Try to express concepts, not formats. Contrived example:

Wrong:

div.red
{
    color: red;
}

as opposed to:

Good:

div.error
{
    color: red;
}

CSS should be the formatting companion for the concepts you use on your web site, so they should be reflected in it. You will be much more flexible this way.

Answer 2

Aside from the great resources pointed in the other answers, here are some tips to structure the way you work on the CSS:

Do the work in the following order...

1. Lay out the semantic structure of your page in HTML. Make sure it's right without any CSS.
   • Create the basic layout of the page in a CSS - columns, headers, floating boxes.
   • Add typography - fonts, sizes and colors.
   • Add the graphical elements - background pictures, logos and so on

Put a link on your page to the W3C CSS validator (if your site is visible from the internet) and keep hitting it every so often.

Keep all your styles outside of the HTML.

It's good to have IE6/7/8, FF2/3 and Chrome/Safari. Opera would be nice too. Keep changing the browser you open your page in while working (unless you're digging into a particular browser issue :-)).

Add comments what each rule does and why. Keep the dev version of the CSS checked in and once you're done, then remove comments and whitespaces and compress multiple rules into one for production.

Update: As Bobby Jack mentioned, I missed to mention the debugging tools. You can use IE Developer Toolbar (for IE) or Firebug (for FF) or the integrated Inspection tools in Chrome to inspect which rules are applied to particular element, or modify the style of an element on the fly.