Content and style
HTML says what is on a page. This file has a heading, h1, and a paragraph, p. The browser makes an element for each one and, with no CSS yet, draws them in its plain default style.
CSS, short for Cascading Style Sheets, says how that content looks: colours, sizes and spacing. It lives in its own file, here style.css. A stylesheet is a list of rules; this one has a single rule.
A rule starts with a selector, h1, which picks the elements to style. Declarations follow inside curly braces. Each is a property, a colon, a value and a semicolon: color: tomato; means make the text colour tomato.
The browser at work
A page only uses the CSS it asks for. This link element in the HTML, with rel="stylesheet" and href="style.css", tells the browser to fetch style.css and use its rules for this page.
The browser checks each rule's selector against every element on the page. The selector h1 matches the heading element. The paragraph is a p, not an h1, so this rule leaves it alone.
Applying the rule
Now the declarations are applied to the matched heading. color sets the text colour. tomato is one of the colour names CSS knows, a red-orange, so the heading turns tomato. The paragraph stays black.
font-size sets how big the text is; px means CSS pixels. A browser usually draws h1 at 32px (twice its 16px default), so 48px makes the heading one and a half times as big.
letter-spacing adds extra space between the letters, here 4px. Spacing is part of style too. Later lessons use margin and padding, which set the space around whole boxes.
Change only the CSS and the same HTML looks different: teal, 24px, 12px apart. The HTML file did not change at all. Keeping content and style apart lets one stylesheet style every page of a website.
What happens
;; step 1/9 · html-content index.html the content <h1> a heading "Hello!" <p> a paragraph "My first page." no CSS yet: the browser's own defaults h1 black, 32px, letter-spacing 0px, bold p black, 16px, letter-spacing 0px
A real browser applies all of a rule's declarations at once, while it works out the style of every element. The figure applies them one at a time so you can see what each one does. Without any CSS the browser still has a built-in stylesheet. It makes h1 bold, twice the normal size and gives it space above and below; the page drawing follows those defaults approximately.