The Difference Between ID and Class

ID, short for fragment identifier, is a beautiful attribute, but it's very easy to use them improperly. You can only use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says "you are here" on a mall directory, and there can only ever be one of those.

Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don't know the full extent to which they can use classes. Classes can not only be used more than once, but more than one can be used on an element:
 
It is common for people who are new to programming to have difficulty in understanding the difference in classes and id's and when to use them. I had this same problem when I first started out and it took a while before I was really clear on the concept. SaadHost explained it perfectly and I hope that it provided some clarification.
 
The id selector is used to specify a style for a single, unique element.

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
 
The easiest way to understand Id and class is ID's are unique and Classes are NOT unique. It means that ID's should be used only once, that is the reason we call it as ID and coming to class, we can use the classes over and over. We can use multiple times in the same HTML document.
 
Armchair has a good answer. A couple of more tips - IDs can override styles when it comes to your css file. In other words if your <p> tags all have a class of "description" but you want one of those to have a slightly larger size, you can assign that <p> its own ID (plus the class "description") so that your html and css look like this -

<p class="description" id="intro">
</p>

.description {font-family:arial, sans-serif; font-size:12px;}
#intro { font-size:14px;}

What will happen is that the #intro font size will override the 12px size but still retain the font family. This is more efficient way of writing your css.

Another tip is that it's not a good idea to name a classname based on a property (class="greenBoldArial"). That's because if you ever wanted to change the color of all the text that uses that class, then you'll have a class name with "green" in it but the text is, say, blue. Choose classnames based on what function they will serve (body, intro, description, footnote, etc).
 
The id selector is used to specify a style for a single, unique element.

Example
#Abc
{
text-align:center;
color:red;
}


The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Example
.center {text-align:center;}
 
You must log in or register to reply here.
Back
Top