What CSS does

HTML gives a page its structure and its meaning. CSS decides how that structure looks.

You never start from a blank canvas. Every browser ships with a user-agent stylesheet, a set of default rules. That’s why headings are big and links are blue and underlined before you write a single line of CSS. Your rules join those defaults, plus the user’s own preferences, in a process called the cascade. We’ll spend a whole lesson on it later.

Here is a small rule:

h1 {
  color: navy;
  font-size: 3rem;
}

This selects every h1 on the page and sets two properties on it.

Notice that the rule does not say “draw a navy heading at these coordinates”. It says “headings should be navy and this big”. The browser does the rest. Roughly, it:

1. finds which rules match each element
2. runs the cascade to pick one value per property
3. computes inherited and relative values, like that 3rem
4. lays out the boxes using the content and the space available
5. paints the result

This is the mental shift I want you to make early. CSS is not a drawing program. It’s a set of constraints. You describe how wide a box may become, how siblings share space, what happens when the text grows, and which rule wins when two disagree. The browser applies those constraints to whatever content and screen it gets.

That’s also why CSS can feel unpredictable at first. The same rule produces a different result on a phone, on a wide monitor, and with a longer headline. Once you think in constraints instead of pixels, that stops being a surprise.

See it in the browser

Open any page, right-click the heading, and choose Inspect. The Styles panel lists the rules that matched it. Some declarations are crossed out: they lost to another rule. The Computed tab shows the final winning values. The Layout section shows the size the browser calculated after layout.

Now try to break the page a little. Change the heading text to something much longer. Narrow the window. Bump the browser’s default font size in its settings.

Good CSS survives all of that. It keeps producing a usable page because its constraints respond to the content, instead of assuming one perfect screenshot. Writing that kind of CSS is what this course is about.