id vs. class

What's the difference?

[bakedjake]

As I'm getting closer to finishing my first page, I see that some people tend to use the # and id attributes, while others use . and class attributes.

To me, they look like they do the same thing. So what's the difference?

[grahamstewart]

An id should be unique on a page and is used to identify one particular section or element within a document.

A class is something that can appear multiple times within one document.

In other words, an id is a distinct thing, but a class is a type of thing: so your site menu or your top banner might have an id, but your news articles would have classes.

[screech2]

I think you can only use the ID only once per page.
But that's all I know.

Steve

[mipapage]

I'll spell it out basically (cause I don't know the juicy details), and the way that I understand it!

Basically, they both do the same thing WRT css, however an ID should only be used once in a document, whereas a class can be used over and over.

For example, you only have one <div id="header">, but may have many <p class="rightalign">.

There are some underlying XML reasons, I believe, however sematically speaking an ID is just that, an ID, and is unique, whereas a class can be applied to a group of things.

Whew, clear as mud, eh?

[bakedjake]

Thanks. Methinks I've got it now. ;-)

[grahamstewart]

Just to confuse things a little...

An element can class AND an id.

Oh and an element can have more than one class, so you could have something like this...

<div id="topstory" class="important article">

[mipapage]

but be careful that you don't catch 'classitis'! But that's another thread....

[bakedjake]

classitis? as in applying 15 classes to one element? or declaring classes for every single element in the document?

if it's the latter, i already have it. :-/

[GaryK]

I think I've got it too. But with DrDoc's help I hope to eventually be cured. :)

[Birdman]

I like to use ids on separate 'chunks' of my pages that will have different appearances.

The reason is, If I define a div(say <div id="eventdetails">), then I can use my stylesheet to define the behaviour of the elements within that div without using classes. This saves a bit of HTML coding since I don't have to use a bunch of classes on the elements inside the div.

You don't even have to define any rules for the actual id.

#eventdetails p{margin: 5px auto}
#eventdetails span{font: bold}
etc..

This avoids something like:
<p class="someclass">
<span class="bold">Blah</span>
</p>

Well, I hope that make sense ;)

Birdman

[RammsteinNicCage]

My rule of thumb with choosing what I want to consider an id is: "Will I want to move it's position in the future?" I may want to move a header (perhaps its alignment) or move the nav links to the right side instead of the left. I probably won't ever want to move the name of a section, a category name we'll say. But, I may want to move the element it is in.

Jennifer<--I hope that made sense....