W3docs
en
Log in

CSS id and class

Use CSS ID selector to identify one HTML element, that you want to style with CSS. To identify more than one elements use ID selector. See examples.

In our previous chapter, we learned about selectors. Now we will speak about id and class selectors, which are frequently used to style web page elements.

CSS class selector

CSS id selector

An ID selector is a unique identifier of the HTML element to which a particular style must be applied. It is used only when a single HTML element on the web page must have a specific style.

In both internal and external style sheets, we use a hash (#) for an id selector.

Example of an ID selector:

CSS ID Selector for HTML Element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p id="blue">The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>
Try it Yourself »

As you see, we assigned blue as the id selector of the second paragraph (id="blue"), and declared its style using the color property — #blue {color: #1c87c9;} in the <head> section. It means that the HTML element with the id selector blue will be displayed in #1c87c9.

Check this code in our HTML online editor to see that the color of the second paragraph is #1c87c9.

CSS class selector

A class selector is used when the same style must be applied to multiple HTML elements on the same web page.

In both internal and external style sheets, we use a dot (.) for a class selector.

Example of a class selector:

CSS Class Selector Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blue {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2 class="blue">This is some heading.</h2>
    <p>The second paragraph.</p>
    <p class="blue">The third paragraph.</p>
  </body>
</html>
Try it Yourself »

In our example, a class selector is used twice, in the heading and paragraph.

As you see, we assigned blue as the class selector (class="blue"), and declared its style using the color property — .blue {color: #1c87c9;} in the <head> section. It means that the elements having the class selector blue will be displayed in #1c87c9.

In our example, the title and the third paragraph are #1c87c9. Check it in our HTML online editor.

The Difference Between ID and Class

The difference between IDs and classes is that the first one is unique, and the second one is not. This means that each element can have only one ID, and each page can have only one element with this ID. When using the same ID on multiple elements, the code won’t pass validation. But as classes are not unique, the same class can be used on multiple elements, and vice versa, you can use several classes on the same element.

Practice

Practice

What is the main difference between CSS ID and class?