ID vs. CLASS

liunx

Guest
Noobie alert!

I have been learning about CSS from <!-- m --><a class="postlink" href="http://www.w3schools.com">http://www.w3schools.com</a><!-- m -->.

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.

<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_syntax.asp">http://www.w3schools.com/css/css_syntax.asp</a><!-- m --> 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.You're only supposed to have one element for any one ID while classes are for classes of elements.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?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 <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.2.The">http://www.w3.org/TR/html4/struct/globa ... -7.5.2.The</a><!-- m --> "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.A-HA! Now I get it.

Thanks alot.

-Phil
 
Back
Top