Selectors

CSS is a list of rules. Each rule picks some elements and says how they should look.

h1 {
  color: teal;
}

The part before the braces is the selector — which elements. Inside is a list of property: value pairs — what about them changes.

Three selectors carry most of the work:

• p — every paragraph. By tag name.
• .note — every element with class="note". A class is a label you put on as many elements as you like.
• #total — the one element with id="total". An id belongs to one element.

When two rules disagree

p { color: grey; }
.note { color: crimson; }

A paragraph with class="note" is picked by both. The class wins, because a class is more specific than a tag. When specificity ties, the rule written last wins — which is why order in a stylesheet is not decoration.

Try it

Give the second paragraph class="note" and watch it change colour. Then add a rule for #intro and see it beat both.