CSS basics: selectors, the box model, and flexbox
CSS has three ideas you'll use constantly: selectors (what to style), the box model (space around things), and layout (flexbox and grid). Master those and you can build any interface.
The big idea
CSS targets elements with selectors, spaces them with the box model (padding, border, margin), and arranges them with layout systems like flexbox.
See it in code
Start with a selector. .card targets every element with class="card" — here just one — and gives it a background and text color:
<style>
.card { background: #eef2ff; color: #1e293b; padding: 16px; }
</style>
<div class="card">Box A</div>.card { ... } is a class selector: write the rule once, and it styles every element with class="card" on the page.
Now the box model — the layers of space around content. padding adds room inside, border draws an edge, and border-radius rounds the corners:
<style>
.card {
padding: 16px;
background: #eef2ff;
border: 2px solid #4f46e5;
border-radius: 10px;
}
</style>
<div class="card">padding + border = the box model</div>Content, then padding, then border — that's the box model, layer by layer. It governs the spacing of every element you'll ever style.
Add a second card and lay them out. display: flex on the row places the cards side by side, and flex: 1 makes them share the width evenly:
<style>
.row { display: flex; gap: 12px; }
.card {
flex: 1;
padding: 16px;
background: #eef2ff;
border: 2px solid #4f46e5;
border-radius: 10px;
}
.card h3 { margin: 0 0 6px; color: #4f46e5; }
</style>
<div class="row">
<div class="card"><h3>Box A</h3>padding + border = the box model</div>
<div class="card"><h3>Box B</h3>flexbox shares the row evenly</div>
</div>.card is a class selector — it styles every element with class="card". Each box wraps its content in padding, then a border. display: flex with flex: 1 on the children makes them split the row evenly — no floats, no manual widths.
The pattern — select, then declare — is how you style at scale: one .button rule styles a hundred buttons. The box model (content, padding, border, margin) governs spacing everywhere, and flexbox/grid are the layout engines behind virtually every modern site.
Try it yourself
Add a third card and watch flexbox re-split the space three ways. Then change .row to display: grid; grid-template-columns: repeat(3, 1fr); for an explicit grid layout.
The common mistake
Fighting the box model by forgetting box-sizing. By default, width doesn't include padding and border, so a '100px' box is actually wider. Setting box-sizing: border-box makes width include padding and border — the sane default most projects use.
What it unlocks
Selectors and layout style your HTML, power responsive design, and inform utility-class tools like Tailwind.