Using Style Classes and IDs

Classes and IDs help extend your CSS

A web developer

E+/Getty Images

Building websites on today's Web requires a deep understanding of CSS (Cascading Style Sheets). These are the instructions that you give a website to determine how it will layout in the browser window. You apply a series of "styles" to your HTML document which will create the look and feel of your webpage.

There are many ways to apply those aforementioned styles across a document, but oftentimes you want to use a style on only some of the elements in a document, but not all instances of that element. You may also want to create a style that you can apply to several elements in a document, without having to repeat the style rule for each individual instance. To achieve these desired styles, you will use the class and ID HTML attributes. These attributes are global attributes that can be applied to nearly every HTML tag. That means that whether you are styling divisions, paragraphs, links, lists or any of the other pieces of HTML in your document, you can turn to class and ID attributes to help you accomplish this task!

Class Selectors

The class selector allows you to set multiple styles to the same element or tag in a document. For example, you might want to have certain sections of your text called out in a different color from the rest of the text in the document. These highlighted sections could be an "alert" that you are setting on the page. You could assign your paragraphs with classes like this:

 p { color: #0000ff; }
  p.alert { color: #ff0000; }

These styles would set the color of all paragraphs to blue (#0000ff), but any paragraph with a class attribute of "alert" would instead by styled in red (#ff0000). This is because the class attribute has a higher specificity than the first CSS rule, which only uses a tag selector. When working with CSS, a more specific rule will override a less specific one. So in this example, the more general rule sets the color of all paragraphs, but the second, more specific rule than overrides that setting only in some paragraphs.

Here is how this could be used in some HTML markup:

This paragraph would be displayed in blue, which is the default for the page.
This paragraph would also be in blue.
<p class="alert">
And this paragraph would be displayed in red since the class attribute would overwrite the standard blue color from the element selector styling.

In that example, the style of "p.alert" would only apply to paragraph elements that use that "alert" class. If you wanted to use that class across multiple HTML elements, you would simply remove the HTML element from the beginning of the style call (just be sure to leave the period (

) in place), like this:

.alert {background-color: #ff0000;}

This class is now available to any element that needs it. Any piece of your HTML that has a class attribute value of "alert" will now get this style. In the HTML below, we have both a paragraph and a heading level 2 that use the "alert" class. Both of these would have a background-color of red based on the CSS we just showed.

<p class="alert">
This paragraph would be written in red.
<h2 class="alert">And this h2 would also be red.</h2>

On websites today, class attributes are often used on most elements because they are easier to work with from a specificity perspective that IDs are. You will find most current HTML pages to be filled with class attributes, some of which are repeated multiple times in a document and others which may only appear once. 

ID Selectors

The ID selector allows you to give a name to a specific style without associating it with a tag or other HTML element. Say you had a division in your HTML markup that contains information about an event. You could give this division an ID attribute of "event", and then if you wanted to outline that division with a 1-pixel wide black border you write an ID code like this:

#event { border: 1px solid #000; }

The challenge with ID selectors is that they cannot be repeated in an HTML document. They must be unique (you can use the same ID on multiple pages of your site, but only once in each individual HTML document). So if you had 3 events that all needed this border, you would need to give them ID attributes of "event1", "event2" and "event3" and style each of them. It would, therefore, be much easier to use the aforementioned class attribute of "event" and style them all at once.

Complications of ID Attributes

Another challenge with ID attributes is that they have a higher specificity than class attributes. This means that if you need to have CSS that overrides a previously established style, it can be difficult to do so if you have relied too heavily on IDs. It is for this reason that many web developers have moved away from using IDs in their markup, even if they only intend to use that value once, and have instead turned to the less-specific class attributes for nearly all styles.

The one area where ID attributes do come into play is when you want to create a page that has in-page anchor links. For instance, if you have a parallax style website that contains all the content on a single page with links that "jump" to various parts of that page. This is done using ID attributes and text links that use these anchor links. You would simply add the value of that attribute, preceded by the "#" symbol, to the "href" attribute of the link, like this:

<a href="#event">This is the link</a>

When clicked or touched, this link will jump to the part of the page that has this ID attribute. If no element on the page is using this ID value, the link would not do anything.

Remember, if you want to create in-page linking on a site, the use of ID attributes will be required, but you can still turn to classes for general CSS styling purposes. This is how we mark up pages today - we use class selectors as much as possible and only turn to IDs when we need the attribute to act not only as a hook for CSS but also as an in-page link.