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

This is a decent overview:

http://www.onlinetools.org/articles/cssguides.html

Answer 2

Have a look at CSS Systems for writing maintainable CSS by Natalie Downe of ClearLeft. There are a lot of great concepts in her presentation (I recommend downloading the PDF because her notes are pretty detailed).

I think her presentation is aimed at full time CSS devs more so than beginners, but even beginners could take a lot away from it.

Answer 3

I just have to mention css Zen Garden as a source of inspiration.

Answer 4

Alot of people have some excellent suggestions. I would like to second what codeinthewhole said.

I would strongly recommend using a reset.css style-sheet:

*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}

Either copy and paste or just save the one i linked to.

Also, a mistake i used in my early days was over use of <div id=""> apposed to <div class="">. An id="" is only supposed to be used once (never have two <div id="content">'s), whereas you can have thousands of class="" (like <div class="box">).

And besides, having more than one id with the same name isnt valid html

Answer 5

You can save yourself a lot of headache by understanding specificity. When you set a rule for something, if there is a conflicting rule, specificity decides which rule wins.

A quick (incomplete) rundown:

An element-wide rule (like p {color:green;}) will be trumped by:
A class-specific rule (like p.sidenote {color: blue;}), which will be trumped by:
An id-specific rule (like p#final {color: red;}), which will be trumped by:
An inline declaration (like <p style="color: orange;">), which will be trumped by:
An important rule (like p#final {color: inherit !important;})

...all of which can be trumped by the user's rules.

The interactions can be complex, but there are mathematic rules underlying them. For a more complete treatment, see Chapter 3 of Eric Meyer's "CSS: The Definitive Guide."

To recap: if you set a rule and it doesn't seem to affect anything, you've probably got a conflicting rule. To understand why one rule beats the other, learn about specificity.

Answer 6

The Complete CSS Guide on westciv.com has an exhaustive amount of information on CSS. It's a great place to start diving in.