1024px-Flatirons_Winter_Sunrise_edit_2

In this post, we will take a brief look at how classes and IDs are used in CSS, and we will try to help you better understand how to decide when to use CSS class vs id by providing some simple examples.

In CSS, you can assign and control the style of HTML elements on a web page using a number of selectors. ID and class are two of the mostly used CSS selectors that not only help with building the layout of the HTML document but they also help with styling it. They are also used for controlling and manipulating the DOM elements via JavaScript but we shall leave that topic to another post.

Let’s first start with how ID and class selectors are used and then we will continue with their differences and when to use each of them.

How CSS ID Selector is Used

The id selector is used for selecting a single HTML element with a unique id attribute value. In the following example, you will see a division element <div> with an id attribute value of header.

In your stylesheet file, you can apply styles to this div element like the following:

Note the use of # (hash) in front of the id name while applying the CSS rule. You can learn more about the id selectors on this page and this page.

How CSS Class Selector is Used

The class selector is used for selecting a single or a group of HTML elements with the same class attribute value. In the example below, you will see three paragraph elements <p> with a class attribute value of content.

This is our first paragraph.

 

This is our second paragraph.

 

This is our third paragraph.

In your stylesheet file, you can apply styles to these paragraphs like the following:

Note the use of . (dot) in front of the class value while applying the CSS rule. You can learn more about the class selectors on this page and this page.

What’s the Difference Between CSS Class vs ID

If you noticed from the above examples, we used the id selector (#header) for a single element, whereas we used the class selector (.content) for multiple elements. This is because an id value can be given to only one HTML element, in other words, multiple elements cannot have the same id value on the same page. For example, you can have only one element with a #header id or one element with a #footer id on your page. On the other hand, a class value can be given to one or more HTML elements, usually of the same type. For example, you can have multiple paragraphs with a .content class or multiple links with a .external class.

The following example will help you better understand the difference of CSS class vs id and how to use them correctly in your layouts.

 

This is our first paragraph.

 

This is our second paragraph.

 

This is our third paragraph.

In the above HTML layout, we started with the container div. We assigned it an id (#container) because there is only one container on our page. Within this container, we have the menu (#menu) and content (#content) sections. Like the container, we have only one menu and one content section on our page. Inside the menu element, we have four links, <a>, hence we assigned a class (.link) to each of these links. Similarly, we assigned a class (.text) to each of the paragraphs in the content div.

If we were to apply styles to these elements, we would use something like the following:

When to Use Class vs ID in CSS

The basic rule that you need to keep in mind while using classes and ids in CSS is that, id is used for single elements that appear on the page for only once (e.g. header, footer, menu), whereas class is used for single or multiple elements that appear on the page for once or more than once (e.g. paragraphs, links, buttons, input boxes). While you can also use a class for a single element, in order to get used to this distinction and use these separators as they are intended, it is better to make a habit of using classes to control the style of multiple of the same type of element.

Another point to keep in mind is that an HTML element can have both an id and a class. For example, let’s say you need to have two boxes on your page with the same size and style but different positioning. In this case, you can assign the same class to these boxes to control their size and style and then assign a different id to each box to control their positions.

 

Elements may also be assigned multiple classes at the same time. This is especially helpful when you need to style a smaller group of elements within a certain type of element on your page. For example, let’s say you have a .content class that is applied to all paragraphs. If you want to add a border or any other style to certain paragraphs, you can add another class such as .bordered, like the following:

This paragraph has no borders.

 

This paragraph has borders.

Note the empty space between the two class names in the class attribute of the second paragraph. A sample CSS for the above HTML code would be:

It is important to use the IDs and classes correctly based on the above points because their wrong use may result in non-functional HTML code and even if the page may look good on a certain browser or device, it may look broken on another one.

This concludes our discussion about CSS class vs id and we hope that you found it to be helpful.