Add CSS to an HTML page

Keep structure and presentation separate

Link one external stylesheet from the document head.

<link rel="stylesheet" href="css/site.css" />

Then write rules that describe presentation without changing the element’s meaning.

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
}

.intro {
  max-width: 65ch;
  font-size: 1.125rem;
}

Use classes for reusable roles. Avoid choosing an element only because of its default appearance; CSS can style the semantically correct element.

Test failure states

Temporarily block or rename the stylesheet. The page should remain readable and correctly ordered. If critical information disappears, the HTML or content structure needs repair.

Exercise

Add a stylesheet to your first page. Change only typography, spacing, and color, then confirm the source order still makes sense without it.