CSS – Differentiating ID and CLASS

The concept of ID and class:

The main and the most important thing that makes the ID and class a very important and a strong concept in css is that it acts as a hook to the several elements being used in XHTML. The elements are defined with their own class and ID. They are to carry with a defining of the several parameters and styles defined under every class and ID. Now When we assign any element under our HTML with ani ID or class, then the particular element is to follow the styles defined under the respective Class or ID.

Example:
<div id=”div1″>
………
………
………
</div>

<div id=”div2″>
………
………
………
</div>

So here we can see we have the same Div element, but they follow different styles defined under their respective ID’s. And so in your CSS we define the styles, somethinmg like this,

#div1
{
Width:200px;
Height:200px;
}

#div2
{
width:400px;
height:400px;
}

So this way both the Div are to use different styles defined. The undefined styles remain the same for both the DIVs.

Difference in ID and a CLASS:

So here we come to the most important topic on this post. Its about the ID and CLASS, why do we need them as two.. As to some one very new to CSS, might feel these as one and the same. But they are not.

The ID are unique,
The most importatnt characterstic of an ID is that its unique for every element of the HTML. This way, we must define different IDs for every single element. Two elements can never have the same ID. This way, we can define different styles for different elements of same type in HTML.

The CLASS are not UNique,
In contrast to the IDs the CLASS are not a unique typed ones. We can have more than one element to be with a same class name. The class groups several elements and defines the same set og styles to all those elemets defined under the same class. This way the class helps in defining styles that we need to apply to more than one element.

Analogy:

This is an analogy that i read in one of the post recently that really made me to write this post,

Its like gives a clear idea why we go for ID and Class in two different formats, and why do we need them both. So its like take for an example, we have a product in a super market, may be a dvd pack. Now the DVD pack has a bar code on it and also a serial number of it. Here the serial number is unique for all the DVDs in the shop, whereas the barcode which defines the cost and name of the product is same for all DVDs. Here the serial number sticker acts as a class and Bar code acts as an ID. The real use comes, when the shop keeper wants to check for the number of DVD he uses, he needs the unique value called the serial number, whereas when he needs to get the product name, value cost etc which are same for all dvd he goes for the bar code reading. So when he needs to change the cost for all DVD, he simply changes the barcode (CLASS) value. Whereas if he want to calculate the number of them he uses the serial number (ID). Is n’t it a great gift of CSS to have  them both 🙂

After knowing the difference, we get a clear idea and this helps us to efficiently make use of both class and ID where ever needed.

Javascript needs ID:

This is a yet another need for the use of ID, the javascript function getstylebyid(), this allows the javascript to work on the dependency to the styles defined by the ID of an element and not by its class styles.
ID wins over CLASS

Now there was an interesting question which rises in my mind, what if i have both ID and Class defining the same styles with different values, now here which value will the element choose from?? The answer is, the value defined by the ID, as the rule of CSS always the ID overrides the Class for any element.

Hope this post clears your idea on both the ID and CLASS, and in what way they differ from each other. Thanks and do give your comments on this, and also your queries. Thanks. 🙂