CSS Cheat Sheet
Selectors, the box model, Flexbox, Grid, responsive design, modern CSS and animation. The CSS you use every day, on one page.
Colour & text
| Syntax | What it does | Lesson |
|---|
color: #1e3a8a | Text colour | Colors |
rgb(0 0 0 / 50%) | Colour with transparency | Colors |
hsl(150 70% 40%) | Hue, saturation, lightness | Colors |
font-family: Georgia, serif | Font stack | Fonts |
font: 700 1.5rem/1.2 sans-serif | Font shorthand | Fonts |
text-align: center | Align text | Text |
line-height: 1.6 | Space between lines | Text |
text-transform: uppercase | Change case | Text |
text-overflow: ellipsis | "Long tex…" (with nowrap + hidden) | Overflow |
Units
| Syntax | Means | Lesson |
|---|
px | Fixed pixels | Units |
rem | × root font size (16px) | Units |
em | × current font size | Units |
% | Of the parent | Units |
vw / vh | 1% of viewport width / height | Units |
ch | Width of "0" | Units |
clamp(1rem, 4vw, 2rem) | Fluid between limits | Units |
Box model
| Syntax | What it does | Lesson |
|---|
box-sizing: border-box | Width includes padding & border | Box model |
padding: 10px 20px | Space inside (top/bottom, left/right) | Margin & padding |
margin: 0 auto | Centre a block horizontally | Margin & padding |
border: 2px solid #000 | Border shorthand | Borders |
border-radius: 50% | Circle (on a square) | Borders |
max-width: 600px | Never wider than | Box model |
overflow: auto | Scroll when content is too big | Box model |
Display & position
| Syntax | What it does | Lesson |
|---|
display: block / inline / inline-block | Box behaviour | Display |
display: none | Remove from page | Display |
position: relative | Offset from normal place | Position |
position: absolute | Place inside nearest positioned parent | Position |
position: fixed | Stuck to the screen | Position |
position: sticky; top: 0 | Sticks when scrolled to | Position |
z-index: 10 | Stacking order | Position |
Flexbox
| Syntax | What it does | Lesson |
|---|
display: flex | Make a flex container | Flexbox |
flex-direction: column | Stack vertically | Flexbox |
justify-content: space-between | Spread along the main axis | Flexbox |
align-items: center | Align on the cross axis | Flexbox |
gap: 1rem | Space between items | Flexbox |
flex-wrap: wrap | Allow multiple lines | Flexbox |
flex: 1 | Item grows to fill space | Flexbox |
Grid
| Syntax | What it does | Lesson |
|---|
display: grid | Make a grid container | Grid |
grid-template-columns: 1fr 2fr | Column sizes | Grid |
repeat(3, 1fr) | Three equal columns | Grid |
repeat(auto-fit, minmax(200px, 1fr)) | Responsive cards, no media query | Grid |
grid-column: 1 / -1 | Span every column | Grid |
grid-template-areas | Name layout areas | Grid |
place-items: center | Centre in both directions | Grid |
Effects & motion
| Syntax | What it does | Lesson |
|---|
box-shadow: 0 4px 12px #0003 | Shadow around a box | Shadows & gradients |
linear-gradient(red, blue) | Gradient background | Shadows & gradients |
transition: transform 0.2s | Animate changes smoothly | Transitions |
transform: translateY(-4px) | Move without affecting layout | Transforms |
transform: rotate(45deg) scale(1.2) | Rotate and scale | Transforms |
@keyframes spin { to { … } } | Define an animation | Animations |
animation: spin 1s linear infinite | Run it | Animations |
Sizing & centering
| Syntax | What it does | Lesson |
|---|
max-width: 600px | Never wider than 600px | Width & height |
box-sizing: border-box | Width includes padding and border | Width & height |
aspect-ratio: 16 / 9 | Keep a shape | Width & height |
overflow-x: auto | Scroll sideways when needed | Overflow |
margin-inline: auto | Centre a block | Centering |
display: grid; place-items: center | Centre both ways | Centering |
float: left clear: both | Wrap text around an image | Float |
How to use this CSS cheat sheet
This CSS cheat sheet collects the properties and selectors you'll use most, in the same order as the course: selectors, colours, text and fonts, the box model, display and position, flexbox, grid, responsive design and animation. Each section links to the lesson that explains it with live examples you can edit.
Keep it open while you build a page. When you can't remember whether it's justify-content or align-items, or how to write a media query, a quick look here is faster than a search. Type a word into the filter box to jump straight to it, or print the sheet and keep it beside your keyboard.
CSS gotchas worth remembering
- Specificity beats order. A rule with an id selector wins over a later rule with only classes. If a style won't apply, check specificity in the browser's developer tools before reaching for
!important. - Width doesn't include padding by default. Add
*, *::before, *::after { box-sizing: border-box; } so padding and borders stay inside the width you set. - Vertical margins collapse. Two stacked margins of 20px and 30px give a 30px gap, not 50px. Flexbox and grid gaps don't collapse.
- justify-content follows the main axis. In a row it works horizontally; in a column it works vertically.
align-items always works on the other axis. - position: absolute needs a positioned parent. Give the parent
position: relative, otherwise the element positions itself against the page.
The CSS lessons behind this cheat sheet