CSS is not limited to selecting elements by their type. As you know, HTML elements can also have attributes. When working with HTML and CSS a class attribute is one of the most common ways to select an element.
For example, consider the following HTML:
The paragraph element in the example above has a class attribute within the opening tag of the<p> element. The class attribute is set to 'brand'. To select this element using CSS, we can create a ruleset with a class selector of .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, the class is brand, so the CSS selector for it is .brand.
Instructions
On line 11 of index.html there is an <h1> element with the class title.
Now, open style.css. On line 13, use the class selector to create a ruleset that selects that HTML element using the class title.
Inside the curly braces of the .title selector, add the declaration:
This code will change the color of the h1 with the title class to teal.
We’ll see in a later exercise why using .title overrides the h1 selector.