Learn

We can use CSS to select an HTML element’s class attribute by name. And so far, we’ve selected elements using only one class name per element. If every HTML element had a single class, all the style information for each element would require a new class.

Luckily, it’s possible to add more than one class name to an HTML element’s class attribute.

For instance, perhaps there’s a heading element that needs to be green and bold. You could write two CSS rulesets like so:

.green {
  color: green;
}

.bold {
  font-weight: bold;
}

Then, you could include both of these classes on one HTML element like this:

<h1 class='green bold'> ... </h1>

We can add multiple classes to an HTML element’s class attribute by separating them with a space. This enables us to mix and match CSS classes to create many unique styles without writing a custom class for every style combination needed.

Instructions

1.

In index.html, on line 11, there is an <h1> element with a class of title. Add a second class named uppercase to this element.

2.

Next, navigate to style.css, and add a ruleset using the .uppercase class selector. Then, add the declaration below inside of the curly braces.

text-transform: uppercase;

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?