In CSS, the **class** and **id** attributes are used to style different HTML elements. The decision of which attribute to use depends on the problem.

The following examples will go over the main differences between the two.

![](/api/edpresso/shot/6113001859973120/image/5591207222706176)

# Differences

**1. An id is a unique identifier**

Once an `id` has been used to target an element, that `id` cannot be used to target any other element in the HTML document. This is not true for a `class`:

/* Creating an id selector */
#h1_color{
    color: #45597E;
}
/* Creating a class selector */
.p_color{
    color: #74C3E1;
}

<html>
    <head>
    </head>
  <body>
<h1 id = "h1_color"> This is a heading. </h1>



<p class = "p_color">This is a paragraph.</p>
<p class = "p_color">This is another paragraph.</p>
 </body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

**2. Only one id can be assigned per element**

An element can *only* have one `id`. However​, it can have *multiple* classes associated with it.

/* Creating id selectors */
#h1_color{
    color: #45597E;
}
#h1_style{
    font-style: italic;
}
/* Creating class selectors */
.p_color{
    color: #74C3E1;
}
.p_style{
    font-style: italic;
}

<html>
    <head>
    </head>
  <body>
<h1 id = "h1_color"> This is a heading. </h1>



<p class = "p_color p_style">This is a paragraph.</p>
 </body>
</html>

**3. id has higher priority**

If an element gets *conflicting* commands from it's `class` and `id` attributes, then it will go with the commands provided by the `id`.

/* Creating id selectors */
#h1_color{
    color: #45597E;
}
.h1_color2{
    color: #74C3E1;
}

<html>
    <head>
    </head>
  <body>

<h1 id = "h1_color" class = "h1_color2"> This is a heading. </h1>
 </body>
</html>

# Some use cases

If some elements need to have a consistent style (e.g., all the buttons on a webpage need to look the same) then *using classes will be beneficial*.

If there is a need to overwrite existing styles without altering the existing stylesheet, then *ids will be a suitable choice*.

CSS class vs.​ id

Differences

Some use cases

CSS class vs. id