Connect with us


CSS – ID vs Class

Spread the love

A selector is a tool to select the elements on the web page & after selecting them to perform modifications in the properties of the selected elements.

In CSS, we can create Id selectors & class selectors also known as custom selectors. These ids & classes are applied to the HTML elements so that they can be identified, grouped & modified by CSS.

ID’s & classes both are separate phenomena & both have their respective working behaviors. Failure to know this we can find some developers using the Id’s & classes randomly anywhere.

To understand in simple terms IDs are used for identification of elements among the crowd of elements on a web page. One element will have its unique identity & no other element should have a similar identity. It is just like a roll number of a student in a class, one student will have a unique roll number.

On the other hand, Classes are like a group of elements & they can be similar to the other elements. It is like classes in the schools. Class 1 can have many students then Class 2 can have another set of students. So students will roll number 1 & 2 are in Class 1 are similar in this case.


Every id should be unique for every element on a web page. So each element will have a different identity of its own. Normally the Ids are applied to the basic & important elements of the page that need some kind of event to be executed.

Applying an ID

Id is applied to the html elements by the id attribute. Usually it is the very first attribute that can be seen in the elements. It is not a compulsion to use it at very first but this is the best practice to keep the code clean & arranged.

Using IDs

In CSS, one unique id is given style for a single element on one web page. So the main sections of the web page like header, navigation, content or footer should be reserved for unique Ids.

This also helps in organizing the web page at the time of coding. The Ids properly given makes the developer understand the documents easily & if there are any issues in the design then they can be identified with some sort of ease.

When to Avoid an ID

When a specific section of elements on a web page have common styling or they have to be modified through scripting in groups then this kind of elements should be avoided for using ID.

In case of some elements like hyperlinks, they are used in multiple places in the web page. So they must be avoided for the use of ID.

The elements that are repeatedly used in various different parts of a single web page should be avoided.


Class can be used any number of times in a single web page for multiple elements. This makes it possible for CSS to apply the styles to a group of elements in a single go.

Class is applied to multiple elements as a group that have to be displayed with similar looking styles. Class can be created for a bunch of elements & it makes it easier to control design from a central location. So if a color has to be changed for multiple elements then we need not go to every element to change the color.

Applying Classes

Class is applied to the elements on the web page using the class attribute followed by the class name of your choice.

Same class can be used for multiple elements unlike the ID. The same element can have both ID & class attributes set.

In CSS the class styles are defined starting with a dot following the class name.

When to use a Class

Classes are more concerned & related with similar elements displayed in different regions of the web page. Classes can be used multiple times within a web page for different or similar elements.

Classes are used to control the elements in bulk & apply the styling to several elements from a single place.

When not to use a Class

Classes should not be used for the core structural elements on a web page like the header, navigation or footer. The main wrapper of these elements should not be classes but the inner elements can have classes.

If you apply classes to structural elements then flexibility of the design will decrease & there will be difficulties ahead resulting in putting extra markup.

Spread the love
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *