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 appreci

Answer 1

You've already gotten a good set of answers regarding your question put here is a point you may find usefull.

Use Firefox with Firebug extension. If you don't have firefox I recommend you install it even if it's just for this. Firebug allows you to select element from the page and shows you th applied css. Then you can edit this css with the fire bug without any page reloads. Once you're happy with a style you can easily copy the definitions from firbug to your css editor.

At least for me firebug is an absolute necessity when working with styles.

Couple of tips for the css itself. When defining your styles use id's only when the element in question is unique. That way your styles are reusable. Use hierarchical definitions eg. #header .navigationElement a{color:red;} and #footer .navigationElement a{color:black;} That way you can move youre html code around and the correct style is applied automaticly.

Answer 2

I have been building websites for 5 years now and still learn a lot by reading this every so often: http://code.google.com/speed/page-speed/docs/rendering.html

Also check out http://www.zeldman.com blog on CSS. This guy is a legend in the web world.

Answer 3

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.

Answer 4

My first tip would be to always use only external style sheets - try to avoid inline or header styles.

Use classes and ids as much as possible.

I second the suggestion for A List Apart

Although not very pretty, and sometimes a little old, HTML Help by WDG has some good references.

Quirksmode.org has a great css compatibility table.

Answer 5

Well if this is your first website and you're trying to go the CSS route then you should go read up on CSS layout and CSS box model. Understand how to use block elements to do your layout and stay away from tables for layout.

The other thing I'd recommend is you use FireFox for all primary development and make your site work and look how you want it to in FF. Then fire up IE and fix any problems that quirky IE has. You will end up with a much cleaner site and much cleaner CSS if you do it this way.