Week 2 · Day 11 of 91

CSS selectors and the box model

HTML, CSS, Git, and the First Website

Objective

Style elements while understanding spacing and sizing.

HTML is the mechanical structure, CSS is the physical layout and finish, and Git is the revision history for every design change.

selectors and cascade
margin, border, padding, content
box-sizing

Why this matters

Your pages work but they look like 1994. Today you add CSS, and by the end you will be able to point at any gap on your page and name the exact property that produced it. That is the difference between styling and nudging numbers until it looks right.

Spacing is where beginners lose hours, because three different properties all make space and they do not behave the same. Learn them properly once and the rest of CSS gets much easier.

What a CSS rule is

CSS stands for Cascading Style Sheets. A stylesheet is a list of rules, and a rule has two parts:

h1 {
  color: #1a3d5c;
  font-size: 2rem;
}

The selector (h1) picks which elements the rule applies to. The declaration block — the braces — holds property: value; pairs. Every declaration ends in a semicolon.

Create styles.css next to your HTML files and connect it inside <head>:

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

href is a path, resolved exactly as on Day 9. Add that line to all three pages so they share one stylesheet: one file, one change, three pages updated.

Selectors and the cascade

Three selectors carry most of the work:

Selector	Matches	Example
Type	Every element of that tag	`p { }`
Class	Elements with `class="card"`	`.card { }`
ID	The one element with `id="intro"`	`#intro { }`

Classes do nearly all the work. You add them in HTML — <article class="card"> — and one element may carry several, space-separated. Selectors combine: .card h3 { } means "an h3 anywhere inside an element with class card".

Now the "cascading" part. Two rules can target the same element and disagree. Three tie-breakers decide, in order:

Specificity. An ID selector beats a class selector, which beats a type selector. #intro wins over .card, which wins over p.
Source order. Among rules of equal specificity, the one written later in the file wins.
Origin. A style="..." attribute on the element beats any selector, and !important after a value beats everything — which is why you should almost never write it. Reaching for it usually means you have not worked out which rule is actually winning.

There is also inheritance: some properties pass down to children automatically. color, font-family, and line-height inherit, which is why setting them once on body styles the whole page. Spacing and border properties do not — each element gets its own.

Layers of settings

Think of a device with a factory default, a firmware config file, and a physical DIP switch. All three set the same option; the most specific wins, and the DIP switch is !important — it works, nobody can see it from the software, and the next engineer wastes an afternoon.

The box model

Every element the browser renders is a rectangle built from four concentric layers. From the inside out:

┌─────────────────────────────────────┐
│  margin        (outside the border) │
│  ┌───────────────────────────────┐  │
│  │  border                       │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │  padding (inside border)│  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │  content          │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

content — the text or image itself.
padding — space inside the border, between the border and the content. A background colour extends across it.
border — the line around the padding. border: 1px solid #ccc; is width, style, colour.
margin — space outside the border, pushing other elements away. Always transparent; a background colour does not reach it.

That distinction is the whole lesson: padding is space inside the border, margin is space outside it. Text touching its own edge is a padding problem. Two boxes touching each other is a margin problem.

Each has four sides, settable together or individually:

padding: 1rem;                 /* all four sides */
padding: 1rem 2rem;            /* top+bottom, then left+right */
padding-top: 0;                /* one side */
margin: 0 auto;                /* no vertical margin, auto left/right = centred */

Footprint, silkscreen, and courtyard

A PCB footprint has the component body, a silkscreen outline drawn around it, and a courtyard — keep-out area beyond the outline that neighbouring parts may not enter. Padding is clearance held inside the outline so the body is not flush against it; the border is the silkscreen outline; the margin is the courtyard. Shrink the courtyard and parts crowd each other; shrink the internal clearance and the part touches its own outline.

`box-sizing`, and why widths lie

By default, width sets the width of the content only. Padding and border are added on top. So this box:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

occupies 300 + 20 + 20 + 2 + 2 = 344px on screen. Ask for 300 and get 344. Put four such boxes in a 1200px row and they overflow.

One declaration fixes it:

* {
  box-sizing: border-box;
}

* is the universal selector — every element. border-box means width includes padding and border, so a width: 300px box measures exactly 300px and its content area shrinks to 256px. Almost every real project sets this on the first line of its stylesheet. Do the same.

Walkthrough: style the cards

Add class="card" to each project entry in index.html, for example <article class="card">…</article>. Then write styles.css:

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #222;
  margin: 0;
  padding: 1.5rem;
  max-width: 60rem;
}

h1,
h2 {
  line-height: 1.2;
}

.card {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.card h3 {
  margin-top: 0;
}

Reload, and read what each rule did. line-height: 1.6 on body inherited down to every paragraph. .card h3 { margin-top: 0 } removed the heading's default top margin, which had been adding to the card's own padding — a very common two-property interaction.

Watch the box model in DevTools

Right-click a card and choose Inspect. In the Styles pane, scroll to the box-model diagram: nested rectangles labelled margin, border, padding, with the content size in the middle. Hover each ring and the browser highlights that region on the page. Change padding to 3rem in the diagram and watch which ring grows.

Your turn

Add box-sizing: border-box and a body rule setting font-family and line-height.
Style your headings — size and colour — and confirm in DevTools that color on body is what your paragraphs inherited.
Turn each project into a .card with padding, a border, and a bottom margin.
Create a conflict on purpose: add .card { border-color: red; } at the very bottom of the file. Red wins on source order. In DevTools, find the earlier declaration shown with a line through it — that strike-through is the cascade, visible.
Add id="intro" to one card and a #intro { border-color: green; } rule above the red one. Green wins despite being earlier, because ID beats class. Delete both experiments after.
Measure one card in the box-model diagram and write the arithmetic in your notes: content + padding + border = rendered width. Explain why border-box changes which number moves.

You are done when

You can point at any gap on your page and say whether it is padding or margin, on which element, and confirm it in the DevTools box-model diagram.

Tutor mode, when a rule does not apply

Tutor mode means asking for an explanation and a small example, then attempting it yourself — not asking for the finished stylesheet. Paste your CSS and the element you are stuck on:

"Explain the CSS cascade for one selected element using the rules in my stylesheet."

Then verify the answer against the DevTools Styles pane. If the AI says one rule wins and the browser shows another, the browser is right.

Common pitfalls

Confusing padding and margin. Text touching its own border needs padding. Boxes touching each other need margin.
Vertical margins collapsing. Two stacked elements with margin-bottom: 20px and margin-top: 30px end up 30px apart, not 50px — adjacent vertical margins collapse to the larger one. Not a bug; expect it and pick one direction to space with.
Forgetting the . before a class name. card { } selects a non-existent <card> element and silently does nothing.
Fighting the cascade with !important. Find the winning rule in DevTools instead and adjust it, or you will be stacking !important on !important by Week 9.

Verify it yourself

Open today's reference, MDN's CSS styling basics, and find its pages on the box model and on handling conflicts.

MDN describes the difference between the standard box model and the alternative box model. Which one does box-sizing: border-box select, and does MDN's arithmetic match the 344px calculation above?
Find MDN's explanation of specificity. It scores selectors as three numbers. Work out the score for .card h3 and check it against MDN's rules.

Record both in notes/day-11.md, with your own one-sentence definition of the cascade.

The hour

0–5 min Recall

Without notes, state yesterday’s main idea and one unresolved question.
5–20 min Learn

Read only the listed concept notes and official reference sections needed today.
20–48 min Build

Add a stylesheet and style typography, cards, spacing, and borders. Use DevTools to inspect the box model.
48–55 min Explain and verify

Run the result, inspect evidence, and explain the data/control flow in your own words.
55–60 min Quiz and commit

Complete the quiz, record one lesson, and commit the verified change when applicable.

What to hand in

Deliverable

A clean page whose spacing can be explained property by property.

Working with AI today

AI as tutor

Ask for explanations, analogies, questions, and hints. Do not request a complete finished solution first.

Explain the CSS cascade for one selected element using the rules in my stylesheet.

References

MDN: CSS styling basics

Explain-back gate

Pass the quiz above to unlock completion.

I can explain: Style elements while understanding spacing and sizing.
I can identify the input, output, state change, and failure cases in today’s code.
I reviewed any AI-generated change and can justify why it is correct.

Quiz + explain-back checks required.