Why use “id”?

#whatever in the CSS means this is related to an element with the id="whatever". id‘s should be used only for elements which only come up once on a page. (Note that classes can be used multiple times per page.)
Hope this helps,
MaThIbUs

Is there an advantage to using “id”? Could you not just class instead?

You could use a class, but it’s more clear if you separate things you only use once in ids in my opinion.
MaThIbUs

Frolic,
Mathibus is correct… the ID is essentially used for styling something that will occur once on your page.
In your CSS file, any selector that is preceded by the ‘#’ symbol will appear in your markup as an ID, while everything preceded by the ‘.’ will be a class. They don’t differ from DIV or SPAN at all, rather, they are used to style those tags.
Example:
< div id=”rightmenu”> STUFF HERE < /div >
< div class=”redAllCaps”> STUFF HERE < /div>
< span id=”h1Red” > More Stuff < /span >
< span class=”redItalic” > More Stuff < /span>
In your CSS file, you would have the following:
#rightmenu { style it this way }
#h1Red { style it this way }
.redAllCaps { style it this way }
.redItalic { style it this way }
It’s just like Mathibus said…use classes for stuff you use over and over and IDs for those things which are generally used once.

“This isn’t defined in the CSS books I have.”

Really? I’ve never seen a CSS book *whithout* id defined. The id selector is one of the basics of CSS…Just curious, what book are you using?

Actually, it might help to give a slightly more concrete example. (I said SLIGHTLY…)
< div id=”leftmenu” class=”menu” >
….
< /div >
< div id=”rightmenu” class=”menu” >
….
< /div >
In this case, you have a right and left sidebar, both sharing some basic set of properties using:
.menu { }
Then, you override the class with specialization based on the id. Such as left margin vs right margin, or background, etc.
Think of ID being ‘unique instance on page’, whereas class is ‘a generic type of thing’.
I’m not sure in the grand scheme of things how the CSS interpreters REALLY use the differentiation between id and class, but there’s likely good reasons.. ??
-d
https://www.chait.net

Well, I guess you could look at it that way… ??
I don’t really use it as a comment, as much as inserting a ‘unique tag’ on important divs/spans/inputs/whatever, so that whenever I decide I want to specialize them in CSS I can. Sometimes I know ahead of time, sometimes I figure out along the way…
And yes, commenting can help. As can extra linefeeds. Tabs help too in cases, but they’re a bitch to keep aligned. ??
-d

I mispoke when I said CSS books didn’t mention “id”. I actually only have general HTML books (nutshell series) with a chapter on CSS. No mention of ID in that chapter, though.
I think I’m starting to understand it though. Thanks.

Frolic: Cool…glad to hear it’s getting clearer, and that it wasn’t an actual CSS book. If it was, I’d have to put it on my list of banned books ??
NM: One reason I can think of to do it the way David did: the id’s of leftmenu and rightmenu can be used to position those divs on the page, while both might contain the same styling (class of menu), such as unordered lists without bullets, a particular line height, font, link color, etc. So, one class definition covers both sidebars, but the id’s tell the browser where to position them.
-Tony

There’s another thing to note, though it’s only really of use if you’re using very complex CSS: good use of the id attribute will make the page render slightly faster. This difference will be negligible for most pages (no more than a few microseconds at best, and humans won’t notice that), but for very complex layouts it can be a time saver.
It’s also very useful if you plan to use any JavaScript, because it’s easy for JavaScript to pick out elements by id tags.

Ah, I’ve been wondering the same thing… that’s going to help sooo much! Thanks guys!

@ NM. I can’t agree. No text at all should appear outside a tag of some description. Not if you want to be all semantic. It will validate it is true. But it just ain’t right.

by definition, all text is within the [body] tag. ??
d