CSS: ID versus CLASS attributes

what is the difference?

[alarix]

I'm trying to figure out the "rules" for when I should use the ID attribute versus the CLASS attribute when setting styles for my HTML tags. I know ID is for handy reference in scripting, but it can also be used to apply styles. I know CLASS is used to apply styles. But can someone please tell me when it's better to use one versus the other?

[Birdman]

Welcome to Webmaster World!

An id can only be used once per page. So, use id for main layout elements that you only use once per page and class for elements that will use the class more than once.

#topbanner{}
#left{}
#main{}
#right{}

[Birdman]

Check out Nicks CSS Crash Course [webmasterworld.com] for some good reading.

[alarix]

that's great! thank you.

[professor]

Best way to think about it:

id

can be the target for a hyperlink. So you can do

<p id="foo">

instead of

<p><a name="foo"></a>

and link to it with an

<a href="/this/page#foo">

Not only is the former sematically cleaner, it is required in xhtml 1.1, where the

name

attribute has been dropped.

So an

id

must be unique on a page, and should carry some semantic meaning (ie, as something you might conceivably link to). A

class

is more generic, denoting a set of element of the "same" sort.

[DrDoc]

Welcome [webmasterworld.com] to Webmaster World, professor! ;)

To further clearify your excellent explanation: just think about the names...

ID = identifier... class = group...

Every person has some form of unique ID, a drivers licence or passport or whatever, and it works the same way on Web pages.

ID = unique
class = group, no matter if there's one or a few thousand elements in the group

[alarix]

in that case, what would be the point of ever assigning styles to elements via the ID attribute? wouldn't it make more sense to always set styles with a class declaration and just to use ID for identifying?

[Gibble]

You also may apply a class to a bunch of items, but need to slightly modify a few of them based on their id, in those cases you use both referencing techniques.

ie.

.container {
border:thin black groove;
font-size:80%;
}

#left {
position:absolute;
top:0;
left:0;
width:20em;
}
#main {
top:0;
left:20em;
}