I know that an id must be unique and a class is reusable. But what is the difference other than that? Why classify something as an id when you could just have everything be a class and reuse it if need be? I know for alot of things the situation would never come up, it doesnt make sense to have two "title"s or some such thing. Is this mostly just an organization issue for the designer?

As you probably know, ID's are used once for non-reoccurring items such as the menu bar, nav bar content box etc. One reason for the distinction is for organization I suppose but a better reason is that DIVs have higher priority and take precedence over Class properties. IDs have higher specificity than classes. This means that, in situations where a class's properties might not be applied (for reasons of specificity and inheritance), an ID's properties probably will be

Awesome, thanks for the reply. I think I understand inheritance for the most part any chance you could give me an explanation or point me in the direction of something that could give an explanation further on all this inheritance and specificity stuff?

It's for client scripting. If you need to use js to grab and manipulate an element on the page, you use document.getElementById to do it. From that point you might change its class, or do any number of things.

Originally Posted by ForrestCroce

It's for client scripting. If you need to use js to grab and manipulate an element on the page, you use document.getElementById to do it. From that point you might change its class, or do any number of things.

So then none of it is ever taken into consideration unless JS is being used? or can JS not affect classes but it can affect IDs? To be honest im not really sure what part of my question you are answering here

javascript can affect classes as well.

an ID would be used to apply styling to an InDividual item, where as a class can apply to a single element or several.

I knew all that, what I a trying to get the answer too now is what highanddry said about inheritance and specificity. What are the 'situations where a class's properties might not be applied (for reasons of specificity and inheritance)' be?

Yeah, but it's much more difficult to grab an element by its class using the DOM. You can use a foreach loop and some if logic to pick the right one, but something like <span onClick="document.getElementById('xxx').style.disp lay = 'none'"> is probably the main reason to use IDs ( in elements other than the span in that example ).

Z, do you use FireFox? If not, you should give it a try, and install FireBug. It will show you the inheritance path for any element on a page. But here's an example - what color is the link?

<style>
a { color: red; }
.test { color: blue; }
#lnk { color: green; }
</style>

<a href="url.com" id="lnk" class="test">anchor text</a>

Ok I think I got it for now. Thank you for the answers and the suggestion to use FireBug I was only using WebDev at the moment. Talk added to those that helped, I appreciate it.

It's green, by the way, showing how ID takes precedence in the inheritance path ... but FireBug actually shows this, instead of talking about it. Click the attachment for a screen-shot of the cascading part of CSS in action the way FireBug shows it.

ok, say we are not using an ID and assign something a class. Is there anything that takes priority away from the class?
Sorry I forgot to put the green in the last reply. I took the example and ran it through the browser to make sure, after I guessed of course.

Here's some info on Class vs. ID's from css-discuss.org wiki

http://css-discuss.incutio.com/?page=ClassesVsIds

Awesome, thank you for the article!