PHASE 0Beginner ~26 min· topic 1 of 4

Topic 0.1

What CSS Is and How the Browser Uses It

In one line

CSS is a list of rules that say which elements to style and how; the browser matches every rule to the page, settles conflicts with the cascade, then lays out and paints the result.

Think of it like this

Dressing for school. The HTML is you: a head, arms, legs, already there. CSS is the list of instructions your parent leaves on the fridge: "shirts are blue", "on Fridays, shirts are red". You read every note, and when two notes disagree you follow the more specific one (Friday beats every day). That settling of disagreements is the cascade.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

CSS: Cascading Style Sheets: the language that says how HTML elements look and where they sit.
Rule: One instruction in CSS: a selector plus a block of declarations, like p { color: red; }.
Selector: The part of a rule that picks which elements it applies to, like p or .card.
Declaration: One property: value pair inside a rule, like color: red.
Property: The thing you want to change, like color, font-size or margin.
Value: What you set a property to, like red, 20px or bold.
User-agent stylesheet: The browser's own built-in CSS that gives headings, links and lists their default look.
Cascade: The rules the browser follows to pick one winner when several declarations set the same property on the same element.
Inheritance: Some properties, like color, pass from a parent element down to the elements inside it.
DOM and CSSOM: The browser's in-memory trees: the DOM is built from your HTML, the CSSOM from your CSS.

Step by step

01Start with HTML and no CSS

Here is a heading and a paragraph. You wrote no CSS, yet the heading is large and bold and there is white space around the page. That look comes from the browser's user-agent stylesheet.

index.htmlwhole filehtml

<h1>Hello, CSS</h1>
<p>I am a paragraph.</p>

02Write your first rule

A rule picks elements and sets properties. This one picks every h1 and sets two properties. The browser reads it as "every h1: text colour tomato, font family sans-serif".

style.csswhole filecss

h1 {
  color: tomato;
  font-family: sans-serif;
}

03Two rules disagree

Add a second rule for h1 further down that sets color: navy. Both rules match the same heading with equally specific selectors, so the cascade falls back to order: the later one wins. The heading is navy, but it keeps font-family: sans-serif from the first rule, because the second rule never mentioned the font. The cascade is decided per property, not per rule.

style.csswhole filecss

h1 {
  color: tomato;
  font-family: sans-serif;
}

h1 {
  color: navy; /* wins for color only */
}

04Inheritance fills in the rest

Set color on body and every paragraph turns that colour too, without a rule of its own. The paragraph inherits the colour from its parent. The heading doesn't, because its own rule sets color directly, and a value set on the element always beats an inherited one.

style.csswhole filecss

body {
  color: dimgray; /* paragraphs inherit this */
}

05What the browser does with it

The browser turns HTML into the DOM and CSS into the CSSOM, matches rules to elements, computes a final value for every property, works out where each box goes, paints pixels and puts layers on screen.

CSS in the <head> is render-blocking: the browser waits for it before painting anything, so you never see the page flash unstyled. That's also why a huge stylesheet makes the first paint slower.

What the browser does with itdiagram

Rendering diagram…

Try it yourself

1
Predict the winner
In the second example, swap the two h1 rules so the navy one comes first. Before you run it, predict: which colour will the heading be, and what will the console print for h1? Then run it and check.
2
Break inheritance
In the second example, add p { color: purple; } at the end of the CSS. Predict which paragraphs change. (Hint: .note is more specific than p, so it keeps seagreen.)
3
Restyle the card
In the third example, change only the CSS so the card has a dark background (#222) and light text (#eee). The HTML tab never changes. That is the point of CSS.

Code & diagrams

The browser's own styles, before you write any CSS New tab

No CSS tab at all, yet every element has styles: they come from the user-agent stylesheet. `getComputedStyle` (JavaScript) reads the final value of any property. 32px is `2em` of the default 16px; 21.44px is `0.67em` of 32px.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

h1 font-size: 32px
h1 font-weight: 700
h1 margin-top: 21.44px
body margin: 8px
link color: rgb(0, 0, 238)

Your first rules, a conflict and inheritance New tab

The heading is navy (the later rule won for `color`) but keeps `letter-spacing` from the first rule. The first paragraph inherits dimgray from body; `.note` sets its own colour.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

h1 -> rgb(0, 0, 128)
p -> rgb(105, 105, 105)
.note -> rgb(46, 139, 87)
h1 letter-spacing: 1px

Same HTML, two different looks New tab

Delete the whole CSS tab and run: the content is all still there, with the browser's plain default look. Then try your own colours.

Preview

Press Run to see the page.

Console

Nothing logged yet.

The rendering pipelinediagram

Rendering diagram…

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Expect a rule to win because it is "newer" in your mind

In the second example, add body h1 { color: crimson; } above the two h1 rules.

terminal

$ Console

── what you'll see ──

h1 -> rgb(220, 20, 60)

Myth vs fact

Myth

With no CSS, an element has no styles.

Fact

Every element always has a value for every CSS property. Without your CSS, values come from the user-agent stylesheet, from inheritance, or from each property's initial value defined in the spec.

Myth

The last rule in the file always wins.

Fact

Order only decides between declarations of equal origin, importance and specificity. A more specific selector earlier in the file still beats a less specific one later.

Myth

A rule wins or loses as a whole.

Fact

The cascade runs separately for each property. One rule can win color while another rule wins font-size on the same element.

Myth

CSS is not a real skill, it's just colours.

Fact

CSS also handles layout (Flexbox, Grid), responsive design, animation and performance. Layout bugs are some of the hardest front-end bugs, and they are solved with CSS knowledge.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Stylesheets in the <head> are render-blocking (no paint until they load and parse) and also script-blocking: a classic <script> after a <link rel="stylesheet"> waits for that stylesheet, because the script might ask for computed styles. Keep critical CSS small and load it early.
▸
When a style changes, browsers rerun only what's needed: changing color needs style + paint; changing width needs style + layout + paint; changing transform or opacity can often skip layout and paint and only composite, which is why animations prefer those two (Phase 10).
▸
getComputedStyle() returns resolved values: for most properties, the computed value (colours as rgb(...), em turned into px), but for layout properties like width it returns the used value in px after layout. DevTools' Computed tab shows the same values.
▸
The "C" in CSS is the cascade, and it was the key idea in Håkon Wium Lie's 1994 proposal: styles from the browser, the user and the author are combined, rather than one of them owning the page. User stylesheets still exist (for example, a user forcing larger fonts), which is one reason good CSS uses relative units.

Remember this

1
CSS stands for Cascading Style Sheets. It is a language for describing how HTML elements look: colours, fonts, sizes, spacing, borders and where things sit on the screen. CSS never changes what is on the page (that's HTML's job), only how it is shown. The same HTML can look completely different with another stylesheet.
2
CSS is written as rules. A rule has two parts: a selector, which picks the elements to style (p means "every paragraph"), and a declaration block in curly braces holding one or more declarations. A declaration is a property (what to change, like color) and a value (what to change it to, like tomato): p { color: tomato; } reads as "every paragraph: text colour tomato".
3
Even a page with no CSS of yours has styles. Every browser ships a built-in stylesheet called the user-agent stylesheet (the "user agent" is the browser). It's why <h1> is big and bold, links are blue and underlined, and <body> has an 8px margin around it. Your CSS doesn't replace that stylesheet; it is added on top and wins where it disagrees.
4
Many rules can target the same element, and they can disagree. The cascade is the algorithm that decides which declaration wins for each property of each element. In short: where the rule came from (your stylesheet beats the browser's), then how specific the selector is (an id beats a class, a class beats an element name), then order (the later rule wins when everything else is equal). You'll learn it exactly in Phase 2; for now remember "more specific wins, then later wins".
5
Some properties are inherited: if you set color or font-family on <body>, every element inside it gets the same value unless something overrides it. Others, like border or padding, are not inherited, which is lucky: you wouldn't want every child to get its parent's border.
6
What the browser does with CSS, in plain words (the rendering pipeline): it parses the HTML into a tree of elements called the DOM (Document Object Model), and parses the CSS into a matching structure called the CSSOM (CSS Object Model). Then it computes styles: for every element it finds all matching rules, runs the cascade and fills in every property with a final value. Then layout works out each box's size and position, paint fills in the pixels (text, colours, borders), and composite stacks the painted layers onto the screen. When you change a style later, the browser reruns only the steps it must.

Explain it without notes

What is CSS, and what does it change about a page?

Name the parts of the rule p { color: red; font-size: 18px; }.

Why does an <h1> look big and bold even when you've written no CSS?

Describe the rendering pipeline from HTML and CSS to pixels on the screen.

Practice

Write a rule that makes every paragraph's text navy and 20px in size.

Write CSS so the whole page uses a sans-serif font with one rule, without writing a rule for each element. What feature makes this work?

A page has h2 { color: green; } and later h2 { color: orange; font-style: italic; }. What colour and style does an h2 get?

Trade-offs

↔
Relying on browser defaults is quick, but defaults differ slightly between browsers; many projects add a small reset or normalize stylesheet to start from the same base everywhere, at the cost of a few extra rules.
↔
Inheritance saves a lot of repetition (set the font once on body), but it also means a change high in the tree can affect many elements you weren't looking at.

Done when you can

I can say what CSS does and what it doesn't do.
I can name the selector, declaration block, property and value in a rule.
I know where default styles come from (the user-agent stylesheet).
I can explain in one sentence how the cascade picks a winner: more specific wins, then later wins.
I know which simple properties inherit (color, font-family) and which don't (border, padding).
I can list the rendering steps: DOM, CSSOM, style, layout, paint, composite.

Command Palette

Words you'll meet

Step by step

01Start with HTML and no CSS

02Write your first rule

03Two rules disagree

04Inheritance fills in the rest

05What the browser does with it

Try it yourself

Predict the winner

Break inheritance

Restyle the card

Code & diagrams

Break it on purpose

Expect a rule to win because it is "newer" in your mind

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can