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

Not exactly beginner material, but A List Apart is a very interesting blog about CSS and its intricacies.

I find the W3 School's pages on CSS great for reference.

Answer 2

This is a decent overview:

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

Answer 3

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 4

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

Answer 5

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.
2. Create the basic layout of the page in a CSS - columns, headers, floating boxes.
3. Add typography - fonts, sizes and colors.
4. 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 6

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 7

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 8

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 9

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 10

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

Answer 11

If this is your first time, good luck!

I'm not sure that as a beginner you need extensive or exhaustive resources. Take things slow and do everything you can to keep your code readable. Spacing, spacing, spacing.

Use external style sheets (someone said above) and as good of an idea as it sounds now, do not keep adding new style sheets for different sections of the site. It will make your life so much easier down the road.

Answer 12

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.

Answer 13

Resist the urge to over-specify class or id names. Use contextual or descendent selectors. This let's you easily define styles for areas of your page, but save on the sanity of having to manage and remember tons of names. For example:

<ul id="nav">
   <li class="navItem"><span class="itemText">Nav Item</span></li>
   <li class="navItem"><span class="itemText">Nav Item</span></li>
</ul>

#nav { }
#nav .navItem { }
#nav .itemText { }

This is needlessly complex, and you'll find yourself quickly running out of good semantic descriptions. You'd be better off with something like:

<ul id="nav">
  <li><span>Nav Item</span></li>
  <li><span>Nav Item</span></li>
</ul>

#nav {}
#nav li {}
#nav li span {}

Answer 14

i learned what i need to know from Mc Farland's Missing Manual (Oreilly book), and by staring at a sample rails' app's stylesheet. That works pretty well, google "example / sample projects / app / repositories" for PHP, ASP.net, whatever you're using.

Answer 15

If you use a reset script - it'll iron out some of the quirks between different browsers. Doing so has made my life easier.

I've seen some people swear by simply using

* { padding: 0; margin: 0; }

But you can also use more thorough implementations - like the one in the YUI library... http://developer.yahoo.com/yui/reset/

When it comes to testing your site renders - browsershots.org is pretty useful.

The webdev firefox plugin is brilliant - CTRL+SHIFT+E allows you to edit css, and see changes on the fly. If you CTRL+F, you can also hover yr mouse over an element to find out what it is.

To add to the sites other people have mentioned - I've found http://css-discuss.incutio.com useful. Freenode #css is handy too.

Answer 16

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 17

All of them.