Cheat Sheet
The commands you keep forgetting, with a one-line description and a real example you can copy - 629 across 38 tools. Pick a tool in the sidebar, or search across all of them.
CSS
Selectors, flexbox and grid one-liners, and the centering recipes.| Command | What it does | Example |
|---|---|---|
child vs descendant | > is direct children only; space is any depth. | nav > a vs nav a |
:nth-child() | Select by position - zebra stripes. | tr:nth-child(even) { background: #f6f6f6; } |
[attr] selector | Select by attribute or its value. | input[type="checkbox"] { accent-color: teal; } |
:hover / :focus-visible | Pointer hover; keyboard-only focus ring. | button:focus-visible { outline: 2px solid teal; } |
:not() | Everything except. | li:not(:last-child) { border-bottom: 1px solid #ddd; } |
flex row | The everyday toolbar: row, centered, spaced. | display: flex; align-items: center; gap: 1rem; |
flex push-apart | First items left, last item right. | .spacer { margin-left: auto; } |
flex: 1 | Let an item grow to fill the leftover space. | .search { flex: 1; } |
grid columns | Fixed column layout in one line. | display: grid; grid-template-columns: 200px 1fr; gap: 1rem; |
responsive card grid | As many columns as fit, no media query. | grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); |
center anything | The two-line total centering recipe. | display: grid; place-items: center; |
center (flex version) | Same result with flexbox. | display: flex; justify-content: center; align-items: center; |
position: sticky | Scrolls, then pins - needs a top value. | header { position: sticky; top: 0; } |
media query | Styles for a size range. | @media (max-width: 600px) { .sidebar { display: none; } } |
custom properties | Define a variable, use it everywhere. | :root { --accent: #0e7c86; } a { color: var(--accent); } |
clamp() | Fluid value with a floor and ceiling. | font-size: clamp(1rem, 2.5vw, 1.5rem); |
aspect-ratio | Keep a box at fixed proportions. | .video { aspect-ratio: 16 / 9; } |
object-fit: cover | Fill the box, crop the overflow - no squishing. | img { width: 100%; height: 200px; object-fit: cover; } |
truncate text | One line with an ellipsis - all three needed. | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
transition | Animate property changes - name the property. | transition: background 0.2s ease; |
box-sizing | Make width include padding and border (do this globally). | * { box-sizing: border-box; } |
prefers-reduced-motion | Respect the reduced-motion OS setting. | @media (prefers-reduced-motion: reduce) { * { animation: none; } } |