The class and id attributes

Go back to HTML and CSS Index

In this lesson, we will learn how to make some elements stand out from other otherwise identical elements.

Making some elements stand out

In workshop number 2, you learned some new ways to specify which elements that were to be styled. As an example, you styled the page header, without styling the main header. Let's take another look at something similar to what we did in the example:

header {
/* style instructions written here apply to all headers */
}
main header {
/* style instructions written here apply to all header that are nested somewhere inside the main element */
}
body > header {
/* style instructions written here apply to all headers that are direct children of the body element */
}
4.20 | Elements as selectors in CSS

Using just header as selector, the style instructions apply to all headers in the document.

When using main header instead we are a bit more specific, saying that the style instructions should only apply to the elements that are inside the main element. All headers outside of the main element will not be affected.

We're even more specific, when we use body > header because now we're saying that we only want to style the header elements that are direct children of the body element.

Using these kinds of selectors, we can narrow down the elements that is to be styled in a specific way - but there are other ways to do so as well.

The class attribute

If you want to style one or more elements, but not all, in a specific way, you can add a class to each of them. The value of the class attribute - the class - can be used as a selector in CSS:

The HTML

<p class="pink"> This text is to be pink </p>
4.22 | An HTML element with a class

In this example, we're adding the class pink to the paragraph. This class can now be used as a selector in CSS:

The CSS

.pink {
color: pink;
}
4.23 | Using a class value as selector

To add more than one class to an element, add them all as values to the same class attribute, and separate each class value with a space:

The HTML

<p class="pink center"> This text is to be pink </p>
4.22 | An HTML element with two classes

The CSS

.pink {
color: pink;
}
.center {
text-align: center;
}
4.24 | Using class values as selectors

This is a very simplified example, as you can of course add more style instructions to each block.

A class may be added to several elements - so if you have several different elements on the page that you want to align or change the color of, you just add the class containing those style instructions to all those elements.

When creating classes, there are some general rules that apply:

  • All classes must start with a letter (a-z, A-Z)
  • Other than that, they may contain more letters, numbers, dashes and underscores. Spaces are not allowed.
  • They are case sensitive, meaning that class="center" and class="Center" are two different classes.
  • Class values should make sense when it comes to the format that they contribute with.

The id attribute

The id attribute may be added to any element, just like the class attribute:

<section id="news">
...
</section>
4.25 | An HTML element with an id

The value of the id attribute may also be used as a selector in CSS:

#news {
background-color: #efefef;
}
4.26 | Using the id as selector in CSS

Notice the # prefix.

The main difference between the class and the id attribute is that the value of the id attribute has to be unique. No two elements may have the same id.

The id may be used for styling the element, just as we saw in example 4.26, but since id's are unique, we may also use them for other things, e.g. bookmarks:

<nav>
<ul>
<li>
<a href="#news">News</a>
</li>
</ul>
</nav>
4.27 | Bookmarks

Instead of navigating to a new page, the bookmark link takes you to the element with the id value in question - in this example, to the element with the id value news.

Next up

We now know how to add style instructions to specific element. In the next lesson, we will look at something that can help us style the different boxes on the page.

Next up: The CSS Box Model