Programming Language

Difference Between A Class And An ID In CSS

Both are utilized as an identifier of an element, and in fact you can get precisely the same effect when you use either. The distinction is genuinely straightforward, an id is unique, and it is utilized for an individual element of a webpage. A class however is not unique; numerous elements in a webpage can share a class and “inherit” (or gain) that class’ particulars.


In case you’re not at the point where you’re arranging these things ahead of time you’ll know when to utilize a class rather than an id when you end up rehashing yourself in your CSS code. For instance suppose you have a couple of divs on your page and you need the text inside the page to be a sure size and font. Rather than doing “” 5 times for every section, rather you can create a class. This would look something like:

p.class_name {“arial”;}

Anywhere you have a p tag you say class=”class_name” its font will use arial.

When you turn into a CSS expert you’ll arrange for these things early, yet until that point simply know about when you end up copying code in your CSS documents for comparable elements. Utilizing classes is helpful on the grounds that not just does it decrease the measure of code you need to compose, however it can keep your CSS records altogether littler which can expand the load time of your pages.


So if classes are for regular CSS particulars over various elements, when to utilize ids is really straight forward. At whatever time you need to style a particular element you would utilize an ID. This is really basic when you’re doing supreme situating, or subtleties like bolding something or making it an alternate shading and so on. Ids are helpful in case you’re in the propensity for doing inline styles. Advanced web-design manages that you keep your relative programming languages separate, so inline styles are disapproved of, rather utilize an id.

To do likewise as above, yet make a particular section have arial text we would utilize


In the p tag we would then have id=”id_name”.

Difference in syntax

Class and Id have somewhat diverse syntax, but they are equally straight forward: a class is referenced by its HTML element i.e. img, p, hr, h, div, span, etc.. but an id is unique so it doesn’t need to be linked to an HTML element and is indicated with the #.

So given an html page where there are two p tags one with id=”p_1″ and a different p tag with class =”p_arial” the css would be:

p.p_arial {“arial”;}

#p_1 { color: red; } /* makes the font color red */

Combining Classes and Ids

Now in this earlier illustration, we have 2 p tags one that makes use of a class to make the font Arial and one that utilizes an id that identifies red text. What if we wanted the p with the red text to also be Arial? This can be achieved by placing both the id=”p_1″ and the class=”p_arial”. This p tag will inherit the properties of both the class and the id. If there is a conflict between the class and the id, i.e. one says font-color:”blue” and the other say font-color:”red”, the id will always override the class. This is known as specificity, and an id is the most specific of any CSS selector.

It is possible to have multiple classes, this is done by leaving a white space between class names i.e. class=”p_red p_black” if the CSS code is as follows:

p.p_red{color: “red”;}

p.p_black{color: “black”;}

The last class will override the first class. So the paragraphs font color will end up being black in this example.

One final approach to specify elements

Other than determining by Id and Class CSS can tell a record that the majority of a HTML element ought to be styled a sure way. This is the broadest approach to determine styles and is overridden by both classes and ids. This is finished by indicating in the CSS record the HTML element tag name. This ought to bode well on the grounds that it’s similar to you are indicating a class without a class. So to make the majority of the passages in a record use Arial text style sort you would utilize:

p {“arial”;}

Another example is if you want to change the font size, family, color etc.. in an entire document you can reference the body tag:

Body{color:black;”arial”; font-size:.6em;}

Leave a Reply