CSS ID's and Classes

A lot of web designers new to the field aren't aware of the differences between ID's and classes.

ID's and What They're For

ID, short for fragment identifier, and is 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.

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:

<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, like ID's, can also be used in JS 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 designers 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:

.left {
    float: left;
.big p {
    font-size: 125%;
<div class="left big"><p>Some site content.</p></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

The vast majority of CSS coders use ID's for any elements that are simply used once on a page. However, You can (as I do) only use classes to style websites, but, when wanting to use an element in JavaScript, 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 you don't plan on using a class more than once on a page.

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.