ID vs. CLASS

[PhilRey]

Noobie alert!

I have been learning about CSS from http://www.w3schools.com.

I don't understand the difference between the class selector versus the id selector. It seems that the results are identical.

Here's how I understand it.

.blue { color:blue }
Causes every element in the HTML document with class=blue to have blue text.

#blue { color:blue }
Causes every element in the HTML document with id=blue to have blue text.

http://www.w3schools.com/css/css_syntax.asp tries to explain it, but I just don't see the difference.

Could someone please clarify this for me so that I can get it through my thick skull.

Thanks in advance.

[Charles]

You're only supposed to have one element for any one ID while classes are for classes of elements.

[PhilRey]

Does that mean that id=blue can only be used once in a document? If so, what is the benefit of using ID? Why not only use classes?

[Charles]

Yes, you should only have one element with a "blue" ID. And I suppose you could have a class with one item but IDs also work as link targets.

See http://www.w3.org/TR/html4/struct/global.html#h-7.5.2.

[nkaisare]

The "id" attribute is a unique identifier. For example, "PhilRey" is a unique identifier for yourself on this forum. There may not be another "PhilRey" on this forum; nor can there be more than one instances of an "id" in an HTML document.

In general, you can replace any id with class, and make corresponding change from "#blue" to ".blue" in your document without changing the way it displays. However, as a norm, ids are given to those HTML elements (or HTML tags, if if you prefer to call it that) that we want to identify for a particular purpose.

For example, I commonly use:
<div id="header"> or
<div id="navigation">
but
<div class="fancybox"> or
<span class="bluetext">

When you want more than one HTML tag to be displayed in the same manner, you should use class.

[PhilRey]

A-HA! Now I get it.

Thanks alot.

-Phil