The conflict
The page has one paragraph with id="intro" and class="note". The stylesheet has four rules, and each one sets color. Four values for one property is a conflict. The cascade is how the browser picks one winner.
First the browser keeps only rules whose selector matches. p matches the tag name. #intro matches the id, because # means id. .note matches the class, because a dot means class. All four match, so all four compete.
Specificity
Each selector gets a specificity score in three columns: IDs, classes, then tag names. p scores 0-0-1, .note scores 0-1-0 and #intro scores 1-0-0. To compare two scores, read from the left: the first bigger column wins.
Picking the winner
Now run the contest one rule at a time. Rule 1, p { color: gray; }, is the only candidate so far, so it takes the lead with 0-0-1. The paragraph turns gray.
Rule 2 is p again, this time navy. Same score, 0-0-1: a tie. When scores tie, the rule that comes later in the stylesheet wins. This is called order of appearance. Navy replaces gray.
Rule 3, #intro, scores 1-0-0. Compare the first column: 1 ID against 0. The bigger column wins, so red takes the lead, and the other columns are never checked. The paragraph turns red.
Rule 4, .note, comes last but scores 0-1-0. First column: 0 IDs against 1, so it loses. Order of appearance only breaks ties; a higher score beats a later rule. The paragraph stays red.
Now delete id="intro" from the HTML. #intro no longer matches, so rule 3 drops out. Of the rules left, .note scores 0-1-0 and beats both p rules at 0-0-1. The paragraph turns teal.
What happens
;; step 1/8 · conflict
index.html
<p id="intro" class="note">Hello!</p>
style.css
1 p { color: gray; }
2 p { color: navy; }
3 #intro { color: red; }
4 .note { color: teal; }
one element, one property (color), four values
A real browser does not run a contest rule by rule. It collects every matching declaration and sorts them all at once; the figure takes them one at a time so you can watch each comparison. Both ways give the same winner. Before specificity, the cascade checks other things: where a style comes from (your stylesheet beats the browser's built-in one), !important, cascade layers and the style attribute. In this lesson all four rules are ordinary rules in one stylesheet, so only specificity and order decide.