CSS Selectors and the Cascade

Now that you know how to connect CSS to your HTML, it’s time to learn how to target different parts of your page with CSS. These “targets” are called selectors.

Selectors tell CSS which elements to style. Let’s look at the most common ones.

Element Selector

The simplest selector is the element name. For example, if you want all <h1> headings to be red, you can write:

h1 {
  color: red;
}

Try this with some different elements.

Class Selector

A class is used when you want to style certain elements but not all of them.

It’s important to understand that class names are completely made up by you. They are not built-in names from HTML or CSS. You can call them whatever makes sense, like special, foo, highlight, or anything else.