ID vs Class Selectors

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

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.

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 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:

#container { width: 1080px; margin: 0 auto; background: #eee }

          #menu { height: 90px; background: #ddd }
          .link { color: #000; text-decoration: none }
          
          #content { padding: 20px }
          .text { font-size: 15px }

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:

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:

.content { margin: 10px; font-size: 15px; color: blue }
           .bordered { border: 2px solid #222 }