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:
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:
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.
Instructions
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:
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.