You may have found yourself asking this question before, especially if you’re new to CSS or web development. Don’t worry, you’re not alone - confusion regarding classes and IDs is not uncommon. So, should you use a class or ID selector when developing your CSS? I mean, IDs and classes do the same thing, don’t they? Well, not quite.

On the surface it sure seems that way. Both are used when you want to apply a certain formatting style for specific areas. Both are also style sheet selectors. And both are used when you want to give a certain CSS element a “name”.

However, there are a few differences between the two:

1. IDs are only to be used to describe one element, whereas classes can be shared across multiple elements.
2. An ID is identified in CSS using a “#”. A Class is identified in CSS using a “.” (full stop/period).
3. An element can have multiple classes, but only one ID.
4. Only an ID can be called by Javascript’s “getElementByID” functionality.

A simple way to think about this is to draw a comparison with the a general population. Each specific person will have a unique ID, while a class will contain many different people.

ID Explained

W3C gives the definition of the id attribute as “a unique identifier to an element”. In layman’s terms, ID names are only to be used once per page, for a single unique area. This can be especially useful in headers, sidebars, and footers, where the element will only be used once.

First, define your ID in the CSS style sheet as follows:

Afterward, your HTML content look like this:

Keep in mind that technically you CAN define more than one element with the same ID, but it’s not considered best practice to do so. While your page will render properly in most browsers, it will fail the W3C markup validation test.

Class Explained

The class attribute assigns one or more class names to an element. Furthermore, A class name may be shared by several element instances, or in other words, a defined class can be used multiple times throughout your page. You can also have multiple classes per element, listed one after the other. An example:

Begin by defining your class in the CSS style sheet as follows:

Afterward, your HTML content should appear similar to this:

There are many pros to using classes. By sharing classes, you can save a lot of wasted space and pick and choose exactly how you want your content to appear. You don’t need to have each element separately named in your style sheet.

Combining IDs and Classes

These two concepts can also be combined. You may define an element with both an ID and a class selector. This would give the element the characteristics defined in both the ID and the class.

Using our examples from above, if we wanted to have some content with a combination of the first ID and the first class, the HTML would look like this:

More Advanced CSS Techniques

Far more advanced techniques exist, such as applying selectors to specific HTML elements (done by stating the HTML selector first - ie. a.iW{style} will only be applied to hyperlinked elements of class ‘iW’).

These are obviously very simple examples and I plan to cover some of these more advanced techniques in later tutorials. But until then, I hope this has cleared up some of the confusions regarding the differences of CSS IDs and Classes. If, however, I’ve missed something or you’re still confused, don’t hesitate to get in touch.