class= id=?

[LunaC]

What's the difference between saying:
<div class="whatever">
and <div id="whatever">

other that how it's written in the style sheet
(ie: .whatever and #whatever)?

Should one be used only at certain times? One work better in more browsers?

[Anarchos]

A class is applied to multiple elements whereas an id is applied to a single element.

[LunaC]

I'm not sure what you mean...
Can you please explain that in a little more detail? I'm very new to css.

Thanks for your help.

[creole]

a class is something that you can apply to several different elements on a page. For example.

<b class="red">danger</b>

could be used after a list of products to tell people that this product is hazardous.

An ID is like a class, but each ID must be a unique page element. ID's are typically used for dHTML work as you must be able to reference each ID individually to tell it to do something using Javascript. Example:

<div id="layerOne">some content here</div>

<div id="layerTwo">some content here</div>

Now, I could reference layerOne and tell it to do something such as "hide this layer" or "move from here to there" or change the contents from bold to italic.

Understand now?

[Jeremy W.]

Actually, ID could be used in multiple instances (though it wouldn't validate properly as XHTML Strict or anythign) and a dHTML call would affect all of the elements named that.

Granted, it's clumsy, just saying it COULD be done. It had BETTER NOT on my watch But it could

[LunaC]

Ahhh

I get it, thanks!

Guess I should redo some of my pages again

[Doug Baker]

One other thing about classes vs. id...

when you have a zillion different style rules spread out a couple of sheets, you need to worry about the Cascading Order and which styles have greater weight than other styles. In times such as that, elements with an id declaration have a much greater weight than a class declaration.

Doug

[Jeremy W.]

weight?

Sorry, but class is directly inherited from the CSS declaration and is only superseded by inline (id) declarations.

It's just hierarchy. Just as BODY {font-family:arial} P {font-family:verdana} will produce a verdana result inside a <p>, something defined in a class and an id (where the element has both class and id (though I have yet to see a dual, conflicting declaration)) the id will win out.

[tubedogg]

Sort of related here - if I had this on a page:

#content { color: #000000; font-family: Verdana,sans-serif; font-size: 10px; }
.big { font-size: 14px; }
.highlight { color: #999999; }

and then did

<div class="content" align="center">
<span class="big">My <b class="highlight">Text</b></span>
</div>

would the word "Text" be #999999, size 14, Verdana? I mean can I do nested tags per se? With a span wrapped around it and a class inside that?

[Jeremy W.]

yes, and any conflicting ones have hierarchy applied.