How CSS Works

Understand how the browser decides which elements a CSS rule affects and where the displayed result comes from.

The browser parses HTML into a document tree and CSS into style rules. Each rule has a selector and declarations. Selectors are tested against document elements; matching declarations contribute to the computed style.

Several declarations can target the same element. The browser resolves conflicts using cascade rules and inheritance, which we will study separately.

Only the paragraph with class notice matches.

HTML

<p class="notice">Shipping is free today.</p><p>Offer ends Sunday.</p>

CSS

.notice { color: #1d4ed8; font-weight: 700; }

Rendered output

Observe: The first paragraph becomes blue and bold; the second keeps its default color.

A single selector can match more than one element.

HTML

<p class="notice">Free shipping</p><p class="notice">Easy returns</p><p>Terms apply.</p>

CSS

.notice { color: #0f766e; background: #ccfbf1; padding: 8px; }

Rendered output

Observe: Both notice paragraphs share the styling because both carry the same class.

For <code>.notice { color: ... }</code>, <code>.notice</code> finds matching elements, and <code>color</code> sets the text color of each matched element.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not assume the browser applies rules merely because the CSS file exists; selectors must match.
• A later conflicting declaration can change the effective style of an element.

Add the class notice to the final paragraph. Predict exactly which three elements will use the teal rule.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Think in three stages: HTML elements, selector matching, and computed visual styles.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.