Using Style Classes and IDs

Building well-styled websites on today's web requires a deep understanding of Cascading Style Sheets. Apply a series of CSS styles to your HTML document to inform the look-and-feel of your webpage.

Class and ID Attributes

Designers sometimes must apply a style on only some of the elements in a document, but not all instances of that element. To achieve these desired styles, use the class and ID HTML attributes. These attributes are global attributes applicable to nearly every HTML tag—so whether you style 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 sets several styles to the same element or tag in a document. For example, to call out certain sections of your text in a different color as an alert, 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.

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. To use that class across several HTML elements, remove the HTML element from the beginning of the style call, 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 level-two heading that use the alert class. Both display a background color of red:

This paragraph would be written in red.

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

ID Selectors

The ID selector names a specific style without associating it with a tag or other HTML element.

Assume a division in your HTML markup that contains information about an event. You could give this division an ID attribute of event, and then outline that division with a 1-pixel-wide black border:

#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 several pages of your site, but only once in each individual HTML document). So for three events that all need this border, you must identify 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. To override a previously established style, it can be difficult to do so if you have relied too heavily on IDs. 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, consider a parallax-style website that contains all the content on a single page with links that "jump" to various parts of that page. ID attributes and text links use these anchor links. Add the value of that attribute, preceded by the # symbol, to the href attribute of the link, like this:

This is the link

When clicked or touched, this link jumps 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.

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 designers mark up pages today—they use class selectors as much as possible and only turn to IDs when they need the attribute to act not only as a hook for CSS but also as an in-page link.