We can use CSS to select an HTML element’s class attribute by name.

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 rules 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 style.css, add a class selector that will make the title of the page stand out more by making all of its letters uppercased. Write a class named .uppercase. Then, write this inside of its curly braces:

text-transform: uppercase;

Now you can add the class to the title element. Navigate to index.html. On line 11, there is a <h1> element that has a class of title. Add the uppercase class to this element.

Take this course for free

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

Already have an account?