CSS is not limited to selecting elements by tag name. HTML elements can have more than just a tag name; they can also have attributes. One common attribute is the class attribute. It’s also possible to select an element by its class attribute.

For example, consider the following HTML:

<p class="brand">Sole Shoe Company</p>

The paragraph element in the example above has a class attribute within the <p> tag. The class attribute is set to "brand". To select this element using CSS, we could use the following CSS selector:

.brand { }

To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name. In the example above case, the class is brand, so the CSS selector for it is .brand.



In style.css, add a CSS selector for the HTML element with a class of title.


Inside the curly braces of the .title selector you just declared, write:

color: teal;

This code will change the color of the title to teal, since the title h1 element has a class of title in the HTML. You can see the HTML element by navigating to index.html on line 11.

We’ll see in a later exercise why using .title overrides the h1 selector.

Take this course for free

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

Already have an account?