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

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 2

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 3

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 4

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 5

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 6

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.