Building a webpage with layout
Computer Science · Key Stage 3 · The School
Every element is a box
In CSS, every element on a page — a paragraph, an image, a heading — is treated as a rectangular box. That box has CONTENT in the middle, PADDING as space inside the border, a BORDER around the edge, and MARGIN as space outside it, keeping it apart from other boxes. This is called the BOX MODEL, and it governs the layout of every page on the web.
Classes: styling a group at once
A `class` attribute lets you label several elements the same way, then style them all together with one CSS rule: `.card { padding: 16px; border: 1px solid grey; }` applies to every element with `class="card"`. This is far more efficient than styling each element by hand, and it means a design change in one place updates every card on the page at once.
Sections and structure
A real page is built from named sections: a `<header>` at the top, a `<main>` for the content, a `<footer>` at the bottom, and `<div class="...">` for smaller grouped blocks inside them. Naming sections this way is what lets CSS target "just the header" or "just this one card" without accidentally changing the whole page.
Build a page with a header, three "card" sections side by side, and a footer. HTML: a `<header>`, then three `<div class="card">` blocks inside a wrapping `<div class="cards">`, then a `<footer>`. CSS for `.cards`: `display: flex;` puts the three cards in a row instead of stacked one under another. CSS for `.card`: padding and a border, so each card has visible space and an edge. Change the padding number once, in the CSS, and all three cards resize together — that single change proves the classes and the box model are doing real, shared work, not decorating one card by hand at a time.