Using Style Classes and IDs

Classes and IDs Help Extend Your CSS

a web developer
I've never had this kind of code editor in my career so far... Image courtesy E+ / Getty Images

There are many ways to apply styles across a document, but often you want to use a style on only some of the elements in a document, but not all instances of that element. In other instances, you may want to create a style that you can apply across several elements in a document, without having to repeat the style rule for each individual instance. To achieve these desired style, you use the class and id HTML attributes.

These attributes are global attributes that can be applied to nearly every HTML tag.

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 colors from the rest of the text in the document. You would assign your paragraphs with classes like this:

<style type="text/css">
  p { color: #0000ff; }
  p.alert { color: #ff0000; }
</style>

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. Here is how this could be used in some HTML markup:

<p>
This paragraph would be displayed in blue, which is the default for the page.
</p>
<p>
This paragraph would also be in blue.
</p>
<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.
</p>

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):

<style type="text/css">
.alert {background-color: #ff0000;}
</style>

This class is now available to any element that needs it. 

<p class="alert">
This paragraph would be written in red.
</p>
<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.

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 contain 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:

<style type="text/css">
#event { border: 1px solid #000; }
</style>

The challenge with ID selectors is that they cannot be repeated in an HTML document. They must be unique. 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.

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 uses 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>

If you want to create this type of 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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/7/16