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
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;