Lesson 7 of 32 beginner 6 min read

Before this:HTML — structure & semantics

CSS — styling & layout

Q: What does CSS do?

**CSS** (Cascading Style Sheets) controls how a page *looks* — colours, fonts, spacing, sizes, and the arrangement of elements. HTML says what content is; CSS says how it should be presented. You write rules that select elements and set properties on them, and the browser applies those rules when it renders the page.

Q: What is the box model?

Every element the browser lays out is a rectangular **box** with four layers from the inside out: the **content**, the **padding** around it, the **border** around that, and the **margin** separating it from other boxes. Almost all spacing and sizing in CSS comes down to adjusting these four layers.

Q: Should I use flexbox or grid?

Both are modern layout tools and you'll use them together. **Flexbox** arranges items in a single direction — a row or a column — and is ideal for things like navigation bars and toolbars. **Grid** works in two dimensions at once — rows and columns — and suits page-level layouts. A common pattern is grid for the overall page, flexbox within its pieces.

Key takeaways CSS is how a page goes from plain text to designed. You write rules that select elements and set properties — colour, font, spacing, size — and the browser applies them. Every element is a box with content, padding, border, and margin (the box model), and the two systems that arrange those boxes are flexbox (one direction) and grid (two directions). Together with HTML for structure, CSS is the second of the front-end trio — it controls everything about how the page looks.

HTML gives you a structured but unstyled page — black text on a white background, stacked top to bottom. CSS is what makes it look like a designed product. It’s the second language of the browser, and where HTML answers “what is this content,” CSS answers “how should it look and where should it go.” The two are deliberately separate: structure in HTML, presentation in CSS, so each can change without disturbing the other.

How CSS attaches to HTML

A CSS rule has two parts: a selector that picks which elements it applies to, and a block of declarations — property: value pairs — that say what to do to them:

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

That rule selects every <h1> and makes it navy and larger. Selectors are how you target elements:

A type selector like h1 matches every element of that kind.
A class selector like .alert matches elements with class="alert".
An id selector like #header matches the one element with id="header".

Classes are the workhorse — you add a class to the HTML elements you want to style as a group, then write one rule for that class. This is the main reason the class attribute from the last lesson matters so much.

The cascade

The “cascading” in CSS names how the browser resolves conflicts when several rules target the same element. Rather than error, it decides which wins, based mainly on:

Specificity — a more specific selector (an id) beats a less specific one (a type).
Order — when specificity ties, the rule written later wins.
Inheritance — some properties, like color and font, pass down from a parent to its children unless overridden.

You don’t need to master the rules today, but knowing they exist explains a classic beginner moment: “my style isn’t applying.” Usually another, more specific rule is winning the cascade. Reach for clear, consistent class names before you reach for ever-more-specific selectors.

The box model

Here’s the idea that underlies all CSS layout: every element is a rectangular box, and each box has four nested layers, from the inside out:

Content — the text or image itself.
Padding — space inside the box, between the content and the border.
Border — a line around the padding.
Margin — space outside the box, separating it from its neighbours.

.card {
  padding: 16px;          /* space inside, around the content */
  border: 1px solid gray; /* the edge */
  margin: 24px;           /* space outside, between cards */
}

Nearly all spacing and sizing comes down to these four. A frequent stumbling block is that, by default, width sets the content width and padding and border add on top — so a “300px” box can end up wider. The common fix, box-sizing: border-box, makes width include padding and border, which is far more intuitive and is set almost universally today.

Laying out with flexbox

Stacking boxes top to bottom is the default, but real designs arrange things in rows, columns, and grids. Flexbox is the tool for laying out items along a single direction — a row or a column — and distributing space among them.

.toolbar {
  display: flex;
  gap: 12px;              /* space between items */
  justify-content: space-between;
  align-items: center;
}

Set display: flex on a container and its children become flex items you can space, align, and size fluidly. Flexbox shines for navigation bars, toolbars, button rows, and card strips — anything that’s essentially a line of items you want arranged and aligned. It also handles wrapping and flexible sizing, which is a big part of adapting to different screens.

Laying out with grid

Where flexbox thinks in one direction, CSS grid works in two dimensions at once — rows and columns — which makes it the natural choice for the overall shape of a page or any genuinely grid-like arrangement:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;  /* sidebar + flexible main */
  gap: 24px;
}

That creates a fixed sidebar next to a main area that takes the remaining space (1fr means “one fraction of what’s left”). Grid excels at page layouts, image galleries, and dashboards. In practice you combine the two: grid for the big-picture structure, flexbox inside its regions. Both systems are also central to responsive design, where the same layout rearranges itself to fit any screen.

Quick check: which four layers make up the CSS box model, inside to out?

Recap

CSS controls how a page looks — colour, font, spacing, size, and layout — keeping presentation separate from HTML’s structure.
A rule pairs a selector (type, class, or id) with declarations (property: value); classes are the everyday workhorse.
The cascade resolves conflicting rules by specificity, order, and inheritance — the usual reason a style “won’t apply.”
Every element is a box with content, padding, border, and margin; the box model governs spacing and sizing.
Flexbox lays items out in one direction (rows or columns); grid works in two dimensions for page-level layout.
Real designs combine grid and flexbox, and both underpin responsive layouts.

Next up: JavaScript in the browser.

Frequently asked questions

What does CSS do?

CSS (Cascading Style Sheets) controls how a page looks — colours, fonts, spacing, sizes, and the arrangement of elements. HTML says what content is; CSS says how it should be presented. You write rules that select elements and set properties on them, and the browser applies those rules when it renders the page.

What is the box model?

Every element the browser lays out is a rectangular box with four layers from the inside out: the content, the padding around it, the border around that, and the margin separating it from other boxes. Almost all spacing and sizing in CSS comes down to adjusting these four layers.

Should I use flexbox or grid?

Both are modern layout tools and you’ll use them together. Flexbox arranges items in a single direction — a row or a column — and is ideal for things like navigation bars and toolbars. Grid works in two dimensions at once — rows and columns — and suits page-level layouts. A common pattern is grid for the overall page, flexbox within its pieces.