Elements and patterns
The browser makes an element from each tag. Every element has a tag name, like h1 or p. Some carry labels you add: a class, here class="new", or an id, here id="top".
Each rule starts with a selector: a pattern that describes elements. The browser tests every selector against every element, and only the elements that match get that rule's declarations. These three rules use three kinds of selector.
Three kinds of selector
A type selector is just a tag name. p matches every element whose tag is p, so all three paragraphs match. The heading is an h1, not a p, so this rule skips it.
The rule's declaration goes to every match at once. All three paragraphs grow from the usual 16px to 20px. One short selector styled three elements; a new paragraph added later would match too.
A dot starts a class selector. .new matches every element whose class attribute contains the word new. Two paragraphs have class="new", so both match. Coffee is a p too, but has no class, so it does not.
Tea and Cake turn tomato. A class is a label you can reuse: put class="new" on any element, of any tag, and this rule styles it. Coffee stays black.
A hash starts an ID selector. #top matches the element whose id is top: the heading. An id names one element, so it must be unique in the page, and an ID selector picks out exactly that one.
The heading turns teal. Every rule has now been tested against every element, and each element got the declarations of the rules it matched. The page is finished.
Their reach
A type selector reaches every element with that tag. A class selector reaches every element wearing that class. An ID selector reaches one element. Pick the one that matches exactly what you want to style.
What happens
;; step 1/9 · elements index.html 4 elements <h1>Menu id top <p>Coffee no labels <p>Tea class new <p>Cake class new a class can go on many elements an id names one element: unique in the page
A real browser works out every element's style in one pass. The figure tests one rule at a time so you can see what each selector reaches. No two rules here set the same property on the same element, so they never compete. When two matching rules do set the same property, the cascade and specificity decide which one wins.