Learn

CSS Setup and Selectors

Multiple Classes

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.

Instructions

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

Or sign up using:

Already have an account?