When to use id or classes

[webmistress]

I did a quick search on this board to see if I could find a post that explained a bit more about using id's and classes. I am trying to figure out where it is appropriate to use one or the other.

From what I have read and seen would it be correct to say:
Use ID's for main blocks of content or blocks of text (ie just in the DIV/SPAN tag)
Use Classes for individual HTML tags such as images and also for formating text

It's just because when I begin to design my new site (which I am trying to leave tables behind in) I want to know how to best set up the css.

Thank you.

Laura

[deluks]

Element identifiers: the id and class attributes (w3.org)
This link should help.

[rbutler]

ID: Layout purposes. Each ID is unique, meaning it can only be used once in your page, why they are used for layout. For example,

<div id="maincontent">
block level or inline elements in here
</div>

Classes: can be used multiple times for formatting text. span would also work, example:

<span class="something">some text</span>

To do a design I would recommended sketching a draft of the general layout. Then examine what ID's would you need. If you wanted a two layout with a repeating background then this would work:

<div id="leftside">
navigation here
</div>

<div id="maincontent">
content in here
</div>

Examining what you need first, then desigining it is the best way to start. Additionally, design your pages in parts, and develop in Firefox, then after each change, make sure Firefox and IE agree, that way, you won't develop 80 styles that will only work right in one browser, not that I have done that before

Good luck.

[webmistress]

OK, Thanks that's great. Just the information I needed.

[jfitz]

Deluks link is worth looking at, it's always good to get it from the horses mouth.

But in general my policy is this:

IDs can only be used once so I tend only to use them when I'm 100% sure that it won't reoccur. So generally I'll stick to using ids when I'm making the site's template and I'll have a divs with ids with names like masthead, mainNav and subNav etc.

For general styling, I'll use plain html selectors and use those divs for greater specificity. So I might have:

#subNav p{ font-size:0.8em; .....}

Then I'll use classes for any special styling that might reoccur. So for example I might have an interview done and there'll obviously be questions followed by responses. There's obviously no <question> and <response> html tags so I'd give each p element a class name alternating between "question" and "response." Although, as I write that I realise you could just style the blockquote element for the responses and use the default p stlye for the questions. But it still works as an example

HTH,
John