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.



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.


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

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?