Academy · Beginner · 12 min
CSS basics: colours, spacing and layout
Style a page with colours, fonts, spacing, rounded corners and hover effects.
CSS (Cascading Style Sheets) controls how HTML looks. A rule has a selector and some declarations.
button {
background: #2563eb;
color: #fff;
padding: 10px 18px;
border-radius: 10px;
}
button:hover { background: #1d4ed8; }
The box model
Every element is a box: content, then padding (space inside), border, and margin (space outside). Most layout problems come from mixing these up.
Layout with flexbox and grid
.row { display: flex; gap: 12px; align-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
Flexbox lines items up in one direction. Grid arranges rows and columns. The auto-fill / minmax pattern makes a layout that adapts to any screen without extra code.
Try it
Open the CSS card example and change the colours, the radius and the shadow.