How CSS Works

CSS is a separate language that attaches style rules to HTML elements — the browser applies them after parsing the document.

HTML gives content meaning. CSS gives it appearance. They are deliberately separate languages — and keeping them that way is one of the best decisions the web platform ever made.

Why the separation matters

When HTML and CSS are mixed together, every visual change requires hunting through content files. A single colour update could touch hundreds of pages. Separate them and the same change lives in one stylesheet.

There is also an accessibility reason: a well-structured HTML document can be read by a screen reader, processed by a search engine, or displayed in a plain text environment with no CSS at all. The content remains meaningful when the presentation is stripped away.

The web platform divides responsibility cleanly:

HTML — structure and meaning
CSS — presentation and layout
JavaScript — behaviour and interactivity

CSS does not know whether <h1> is a heading because HTML says so; it just targets elements by name, class, or other criteria and applies visual rules.

Three ways to include CSS

1. Inline styles (avoid)

The style attribute attaches CSS directly to a single element:

<p style="color: red; font-size: 18px;">Warning: do not do this.</p>

This works but couples presentation to markup. You cannot reuse the rule, you cannot override it easily from a stylesheet, and the HTML becomes cluttered. Reserve inline styles for genuinely one-off overrides, such as values generated by JavaScript.

2. The `<style>` element

A <style> block inside <head> embeds CSS for that page only:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <style>
      p {
        color: #333;
        line-height: 1.6;
      }
    </style>
  </head>
  <body>
    <p>This paragraph inherits the styles above.</p>
  </body>
</html>

Useful for single-page experiments or component-scoped styles in frameworks. For a multi-page site it forces you to repeat the same rules in every file.

3. Linked stylesheet (preferred)

A <link> element in <head> loads an external .css file:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
p {
  color: #333;
  line-height: 1.6;
}

Every page that links the file shares the same rules. The browser also caches the file after the first load, so subsequent pages appear faster. This is the approach you will use for every real project.

Anatomy of a CSS rule

Every CSS stylesheet is made up of rules. A rule has two parts:

selector {
  property: value;
  property: value;
}

Selector — identifies which HTML elements the rule applies to. p targets all <p> elements; .card targets elements with class="card".
Declaration block — the curly-brace pair {} containing one or more declarations.
Declaration — a property: value pair ending with a semicolon. color: red is one declaration; font-size: 16px is another.
Property — the aspect you are styling: color, font-size, margin.
Value — what you are setting it to: red, 16px, auto.

A concrete example:

h1 {
  color: #1a1a2e;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

This rule selects every <h1> element and applies three declarations to it.

CSS property names are always lowercase and hyphenated (font-size, not fontSize). Values are case-insensitive for keywords (Red, red, and RED all work) but case-sensitive for file paths and identifiers.

The rendering pipeline (briefly)

After your browser downloads the HTML and the linked CSS, it does roughly this:

Parse HTML — builds the DOM tree.
Parse CSS — builds the CSSOM (CSS Object Model), the style equivalent of the DOM.
Combine — creates a render tree that pairs each visible DOM node with its computed styles.
Layout — calculates the position and size of every element.
Paint — fills in pixels.

You will revisit these steps in more depth at the intermediate and advanced levels. For now the key insight is that CSS is processed separately from HTML and applied after the document structure is understood — which is exactly why it can target elements by type, class, or relationship without the HTML itself needing to know anything about presentation.

If you link a large stylesheet at the bottom of <body> instead of <head>, the browser may display the page briefly without styles before the file loads — a flash of unstyled content. Always put <link> in <head>.

Where to go next

Next: Selectors and the Cascade — how to target exactly the elements you want, and how the browser decides which rule wins when multiple rules conflict.

Finished reading? Mark it complete to track your progress.

On this page