The Difference Between ID's and Classes

The difference between CSS ID's and classes is quite notable, and this article explains when one should be used in favor of the other.

October 30, 2006

ID's and Classes

A lot of web designers new to the field aren't aware of the differences between ID's and classes. So here's a fairly brief article outlining proper and improper uses of the two.

ID's and What They're Used For

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.

Browsers use fragment identifiers as well. If you want to place a link at the top of your page that will scroll the browser down to the content when clicked, simply add id="content" to the content element or header above your content and use the following anchor:

  1. <a href="#content">Go to the content</a>

Naturally, CSS can select ID's to apply individual styles to them using the hash sign (#), but JavaScript relies on ID's quite a bit as well. The getElementById() function is very important in most scripts.

Classes

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:

  1. .left {
  2.     float: left;
  3. }
  4. .larger p {
  5.     font-size: 125%;
  6. }
  1. <div class="left larger">
  2.     <p>A tiny bit of content.</p>
  3. </div>

The second piece of code is perfectly valid HTML, it demonstrates a div using two separate classes. This technique can reduce your CSS style sheet considerably when used effectively. It's also worth noting that you can use both ID's and classes on the same HTML element.

When to Use One or the Other

I take a different stance than most web designers when it comes to using ID's and classes. The vast majority of CSS coders use ID's for any elements that are simply used once on a page. However, I only use classes to style my websites, but, when I want to use an element in JavaScript, I use an identifier. From a presentational standpoint, styling elements with classes looks exactly the same as styling them with ID's, but the flexibility of classes offers a certain appeal even if I don't plan on using a class more than once on a page. Also, when I see an ID in my XHTML, it reminds me that there is some JavaScript that refers to that element.

It's up to you, but so long as you implement classes and ID's properly, it is more or less a matter of personal choice when to utilize one or the other.

Comments

I know it's long overdue that I allow comments on my resources. You can now submit them!
Note: I approve comments before before they appear on the site, so please don't spam.

reklama lubin parkowa August 29th, 2014

Thanks for your personal marvelous posting! I truly enjoyed reading it, you might be a great
author. I will make certain to bookmark your blog
and will eventually come back at some point. I want to encourage you to continue your great posts, have a nice afternoon!

Adnan September 30th, 2014

Hi,

Thank you for posting such a good article. Here comes an other example in my mind to differentiate between Id's and Classes.

Consider that there is a book in 10 volumes in a library.Each book have the same colour,title and number of pages . If each volume have the Id 1 with it, then how would it be possible for a student to pick up the specific required Volume of that book?

So the simple way is to give them unique Id's like 1,2,3....etc.

Now consider a Class "Cover" for each of the volume of that book. The Class "Cover" have the attribute "colour" with value "black" and "title" ABC.

In this case,all volumes are using the same class, means they all have the same colour of their cover and same title on each of the volume of that book.

So Id's serve the purpose to uniquely identify some thing among several resembling items. Whereas the classes are used to apply the same thing on several resembling items.

Class 8th in a school applies same course to all of its student. Whereas the enrolment number must be unique for each of them.

If each student in the same Class have enrolment id 1, then during attendance each of them would say "present" and you would even not be able to know who is absent .

best regards.

Dani October 22nd, 2014

Really appreciate the information provided in your article. Came in very handy. Thank you.

Shinde Vinod November 21st, 2014

Hi....
I'm fresher in the designing. So thats why i am confusing to work with id and classes in CSS. Now at some point i clear the difference between id and classes.

Thank you sir.......

Leave a comment






Web Design Resources and Articles