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.

How browsers actually behave

The browser fetches an external stylesheet referenced by link, parses valid rules, and combines them with user-agent styles, user preferences, and other author rules. A syntax error normally invalidates the affected declaration or rule rather than the entire file. DevTools shows both the winning declaration and declarations that lost in the cascade.

Many properties inherit, including text color and font settings; layout properties generally do not. A relative unit such as rem derives from the root font size, while a percentage depends on the relevant containing block. The computed value panel is the reliable place to see what the browser resolved after variables, inheritance, and the cascade.

Decisions and trade-offs

External stylesheets are cacheable and keep presentation consistent across pages. A small critical page can still use a modest inline block, but scattering style attributes makes states and reuse harder to review. Start with low specificity selectors and reusable classes. Escalating to IDs or !important to win each conflict creates a stylesheet that is difficult to change safely.

Preserve native control affordances until you have a tested replacement. Changing typography and color is usually straightforward; completely resetting buttons, inputs, focus indicators, and visited links removes behavior users depend on.

Accessibility consequences

CSS can hide content, change visual order, suppress focus, or create text that fails contrast requirements even when the HTML is correct. It can also improve readability with sensible line length, spacing, visible states, and responsive reflow. Treat the unstyled document as a structural test, not as permission to ignore the styled experience.

Respect user preferences such as reduced motion, forced colors, and increased text size. Do not lock the root font size in pixels or prevent browser zoom. Information conveyed by color also needs text, shape, position, or another persistent cue.

Common failures and fixes

• No styles load. The href is wrong or filename case differs on the host. Inspect the Network panel and use a path that works from every page.
• A rule is crossed out. Another declaration wins by origin, importance, layer, specificity, or order. Inspect the cascade before adding weight.
• One component changes unrelated content. Its selector is too broad. Introduce a role-based class and keep selectors shallow.
• A focus ring disappears. A reset removed it. Add a clear :focus-visible treatment and test all backgrounds.
• Text clips when zoomed. A fixed height assumes one line. Prefer intrinsic sizing and let content determine block height.

Verify it

Open DevTools, confirm the stylesheet returns HTTP 200 with the expected MIME type, and inspect a representative element's matched and computed rules. Disable individual declarations to understand their effect. Block the stylesheet and confirm structure remains usable, then restore it and test 200% text zoom, 320-pixel reflow, keyboard focus, reduced motion, dark mode, and forced colors. Check at least one page loaded from a nested URL so relative asset paths are not accidentally valid only on the home page.

Exercise and next step

Add a stylesheet to your first page. Change only typography, spacing, and color, then confirm the source order still makes sense without it. Next, inspect how the box model changes the space each styled element occupies.

Boundary of this lesson

Adding CSS does not make weak structure meaningful, guarantee accessible color, or prove that a layout works on every device. The stylesheet should enhance a document whose source order and controls already make sense. It also does not require a design system or preprocessor: begin with ordinary rules, measure the result, and introduce tooling only when repetition or scale creates a concrete need. Review the rendered page with user font settings and real content before turning a one-page styling exercise into a reusable architecture.

Before finishing, inspect the cascade origin of each important winning declaration. A correct-looking page can still depend on an accidental selector or source order. Change one nearby rule, reload without cache, and confirm the intended component changes while unrelated content keeps the same presentation.