How CSS works

The page and its clothes

HTML says what things are. CSS says how they look — the colour, the size, the space around them, where they sit. The two live in separate files, and that separation is deliberate: you can restyle an entire site without touching a single tag.

A stylesheet is a list of rules. Each rule has two parts: a selector that chooses what to style, and a block of declarations that say what to do. The browser reads every rule, works out which elements it matches, and paints the result.

A page with no stylesheet is not broken; it is the browser’s defaults doing their job. Headings are bold and larger, paragraphs have space between them, links are blue and underlined. That base is worth knowing because every rule you write is a decision about it: you are either accepting a default, changing it, or removing it. When something looks odd on a page you have barely styled, the cause is usually a default you did not know was there.

One rule, two parts

/* selector */        /* declaration block */
h1 {
  color: #059669;     /* a declaration: property + value */
  font-size: 2rem;
}

How it connects

An HTML page pulls a stylesheet in with a <link> in the head. The browser fetches the file, applies the rules, and every page that links the same file looks the same — change the file and all of them change.

Different selectors choose different things. An element name like h1 styles every heading of that kind; a class like .card styles every element carrying class="card"; and the browser’s own default styles sit underneath all of it, which is why an unstyled page is still readable. Your rules are layered on top of that base.

Where the rules come from

The same page can load several stylesheets: the browser’s defaults, a reset or base file, the site’s main sheet, and any styles a component brings with it. They are not separate worlds. The browser treats them as one long list of rules and applies the cascade across all of them, so a rule in a component file can beat a rule in the main sheet if it is more specific or comes later.

That is also why the order of the <link> tags matters. Two sheets that set the same property with equal specificity are decided by which one the browser read last, not by which file you edited most recently. Keep the base sheet first and the component sheets after it, and the reading order matches the order you would explain the page in.

The cascade, and inheritance

When two rules set the same property, the browser does not guess. It follows the cascade: importance first, then specificity, then source order. A rule later in the file wins only when everything above it ties, which is why moving a rule can change a page without changing a selector.

Some properties also inherit. If you set color and font-family on body, every descendant uses them unless a more specific rule says otherwise. Spacing, borders and backgrounds do not inherit — a border on the body does not draw a border around every paragraph.

See it in the browser

The browser’s developer tools show the cascade directly: inspect an element, and the Styles panel lists every rule that matched, in the order that decided. A declaration that is crossed out lost to a more specific rule. That panel is the fastest way to answer “why is this not applying?” without guessing.

It also shows the inherited value and the final computed value, so a rule that looks missing is often being overridden rather than ignored. Read from the element outwards: the declaration that wins is the one the browser actually paints.

Try these next

• Inspect the h1 and find your rule in the Styles panel.
• Add a second rule with the same selector and change one property; watch which one wins.
• Set a font on body, then override it on one paragraph with a class.