× Terms of Use Privacy Policy

Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

Understanding CSS classes vs. IDs

Learn when to use a class and when do use an ID.

When writing CSS, you will find yourself needing to single out HTML elements or groups of HTML elements to apply styles to. In order to do this, you will need to give those HTML elements a CSS class or ID.

CSS Classes
In CSS, a class is a group of elements that are the same or similar. You can have as many elements as you want in a class. And each element can be the member of multiple classes. Every class has CSS attributes (like color and font-size) that are specific to that class.

CSS classes are similar to a real-life class. A class is a group of students, who often share certain similarities: similar ages, area codes, interests, or life goals.

How to add a class to your HTML element:

<div class="class">

How to use a class in your CSS:

.class {
width:100px;
height:300px;
background:purple;
}

Each HTML element can have multiple CSS classes.

<div class="class another-class">

CSS IDS

An ID is a singular identifier of one HTML tag. You can only have one HTML tag per ID and each HTML tag can only have one ID. Each ID has a specific set of CSS attributes that only apply to that one element.

To go back to our real-life class example, even if a group of students shares many attributes, each student has their own Social Security number that identifies them and only them.

How to add an ID to your HTML element:

<div id="id">

How to use them in your CSS:
#id {
width:200px;
height:200px;
background:blue;
}

Cocktail Party Fact

In CSS, HTML tags, classes, and IDs each have their own numerical value. IDs have the highest numerical value, followed by classes, and then HTML elements themselves. If an HTML element has two styles applied to it that conflict, CSS defaults to the higher value. Check out this CSS specificity calculator.

Your email address will not be published.

7 comments

  1. beckyokeefe Replied

    What does the . in front of the class and the # in front of the id mean?  Does these signify that the CSS is an ID or a class?  

    • sareg0 Replied

      Hey Becky,

      ​Yes that’s right

      ​.my-class is the way you let CSS know that it should be looking for a class

      ​#my-id indicates that CSS should be looking for an ID

      ​Best,
      ​Sara

      • naveed nawaz Replied

        but in which compiler you are using to run the code like for c++ we are mostly using microsoft visual stduio like for php coding which code u used

  2. Some constructive feedback to improve this article:

    Firstly, giving examples like class=”class” and id=”id” can be a bit confusing, because it may be unclear to beginners whether the CSS selector is referencing the key or the value.

    Also, when you say each HTML element can have multiple classes, you don’t give an example of how to implement that (for example, it could be class=”classname1, classname2″ or class=”classname1″ class=”classname2″ for all a beginner would know).

    You don’t explain what will happen if one tries to assign multiple IDs to an element, or assigns an ID to multiple elements.

    Lastly, the last paragraph where you talk about numerical value is a bit confusing. I know what you’re talking about regarding specificity, but beginners may not. You don’t explain what ‘numerical value’ is, and you don’t provide an example.

    • lilcmommie Replied

      I couldn’t agree more!! This whole section confused me and I’ve been thrown off ever since! I’m starting over on this section after using a course on Udemy and the HTML & CSS book I purchased. I enjoy the style of Skillcrush, but some of the instructions are just not clear enough.

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.