5 Cheatsheets
Cheatsheets
Quick-reference code blocks for the things you'll look up most often. Click any copy button to grab the code instantly.
CSS Units
The full set of CSS measurement units — absolute, relative to parent, relative to root, viewport-based, and content-based.
CSS
/* ── Absolute ─────────────────────────── */px /* pixels — fixed size, 1px = 1 screen pixel */pt /* points — mainly for print (1pt = 1/72 inch) */cm /* centimetres — useful for print media *//* ── Relative to parent element ───────── */% /* percentage of parent's value */em /* relative to current element's font-size */ /* 1em = current font-size (cascades!) *//* ── Relative to :root (html) ─────────── */rem /* root em — relative to html font-size */ /* preferred over em — predictable, no cascade *//* ── Viewport units ───────────────────── */vw /* 1% of the viewport width */vh /* 1% of the viewport height */vmin /* 1% of the smaller dimension (vw or vh) */vmax /* 1% of the larger dimension */dvh /* dynamic vh — adjusts for mobile browser chrome */svh /* small vh — always the smallest visible height *//* ── Content-based ────────────────────── */ch /* width of the "0" character in current font */ /* great for line-length control: max-width: 65ch */ex /* height of the "x" character (rarely used) *//* ── Practical tips ───────────────────── *//* Use rem for font-size and spacing (scalable, accessible) *//* Use % or fr for widths in flex/grid layouts *//* Use px for borders, box-shadows, fine details *//* Use vw/vh for full-screen sections or hero heights *//* Use ch for setting readable text column widths */HTML Tags
The most important HTML elements — document structure, semantic layout, text, media, and forms.
HTML
<!-- ── Document structure ─────────────── --><!DOCTYPE html> <!-- declare HTML5 --><html lang="en"> <!-- root element, set language --><head> <!-- metadata: title, CSS, meta tags --><body> <!-- all visible content goes here --><!-- ── Semantic layout ───────────────── --><header> <!-- page or section header / nav area --><nav> <!-- navigation links --><main> <!-- primary content (one per page) --><section> <!-- thematic grouping of content --><article> <!-- self-contained content (blog post, card) --><aside> <!-- sidebar, related content --><footer> <!-- page or section footer --><div> <!-- generic block container (no semantic meaning) --><span> <!-- generic inline container --><!-- ── Text & headings ───────────────── --><h1> to <h6> <!-- headings — use in hierarchy order --><p> <!-- paragraph --><strong> <!-- bold + semantic importance --><em> <!-- italic + semantic emphasis --><a href=""> <!-- hyperlink --><ul> / <ol> / <li> <!-- unordered / ordered list / list item --><blockquote> <!-- quoted content from another source --><code> <!-- inline code --><pre> <!-- preformatted / multiline code block --><br> <!-- line break (self-closing) --><hr> <!-- horizontal rule / divider --><!-- ── Media ─────────────────────────── --><img src="" alt=""> <!-- image — alt text required --><video controls> <!-- video player --><audio controls> <!-- audio player --><svg> <!-- inline scalable vector graphic --><!-- ── Forms ────────────────────────── --><form action="" method="post"><input type="text"> <!-- text | email | password | checkbox | radio | file --><textarea> <!-- multiline text input --><select> / <option> <!-- dropdown menu --><button type="submit"> <!-- submit button --><label for="id"> <!-- label linked to an input by id -->CSS Flexbox
All parent and child properties for CSS Flexbox — the go-to tool for one-dimensional layouts like nav bars, card rows, and centring.
CSS
/* ── Parent (flex container) ──────────── */.container { display: flex; /* Direction */ flex-direction: row; /* → default: left to right */ flex-direction: column; /* ↓ top to bottom */ flex-direction: row-reverse; /* ← right to left */ flex-direction: column-reverse; /* Main axis alignment (horizontal by default) */ justify-content: flex-start; /* pack to start */ justify-content: flex-end; /* pack to end */ justify-content: center; /* centre */ justify-content: space-between;/* equal space between items */ justify-content: space-around; /* equal space around items */ justify-content: space-evenly; /* perfectly even spacing */ /* Cross axis alignment (vertical by default) */ align-items: stretch; /* default — fill cross axis */ align-items: flex-start; /* align to start of cross axis */ align-items: flex-end; /* align to end */ align-items: center; /* vertically centre */ align-items: baseline; /* align text baselines */ /* Wrapping */ flex-wrap: nowrap; /* default — single row */ flex-wrap: wrap; /* wrap to next row */ flex-wrap: wrap-reverse; /* wrap upward */ /* Multi-row alignment (when flex-wrap: wrap) */ align-content: flex-start | center | space-between | stretch; /* Gap */ gap: 1rem; /* space between items (row & column) */ row-gap: 1rem; /* gap between rows only */ column-gap: 1.5rem; /* gap between columns only */}/* ── Child (flex item) ─────────────────── */.item { flex-grow: 0; /* 0 = don't grow, 1 = fill available space */ flex-shrink: 1; /* 1 = can shrink, 0 = never shrink */ flex-basis: auto; /* initial size before growing/shrinking */ /* Shorthand: grow shrink basis */ flex: 1; /* = flex: 1 1 0 — grow and shrink equally */ flex: none; /* = flex: 0 0 auto — rigid size */ flex: 0 0 200px; /* fixed 200px, no grow or shrink */ order: 0; /* change visual order without changing HTML */ align-self: center; /* override align-items for this item only */}CSS Grid
All the key CSS Grid properties for two-dimensional layouts — the best tool for page structure, galleries, and dashboards.
CSS
/* ── Parent (grid container) ──────────── */.container { display: grid; /* Define columns */ grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */ grid-template-columns: repeat(3, 1fr); /* same, shorthand */ grid-template-columns: 200px auto 1fr; /* fixed | flexible | fr */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* responsive — fills as many 250px+ columns as fit */ /* Define rows */ grid-template-rows: auto; /* rows size to content */ grid-template-rows: 80px 1fr 60px; /* header, main, footer */ /* Gap */ gap: 1rem; /* row and column gap */ row-gap: 1.5rem; column-gap: 1rem; /* separate values */ /* Named template areas */ grid-template-areas: "header header header" "sidebar main main" "footer footer footer";}/* ── Child (grid item) ─────────────────── */.item { /* Span across columns */ grid-column: 1 / 3; /* from column line 1 to line 3 */ grid-column: span 2; /* span 2 columns from current position */ grid-column: 1 / -1; /* span all columns (1 to last line) */ /* Span across rows */ grid-row: 1 / 3; /* span from row 1 to row 3 */ grid-row: span 2; /* span 2 rows */ /* Use named area */ grid-area: header; /* place in the 'header' named area */ /* Alignment (override container) */ justify-self: start | center | end | stretch; align-self: start | center | end | stretch;}Colour Formats
Every way to specify colour in CSS — HEX, RGB, HSL, and modern Level 4 formats. Includes opacity/alpha for each.
CSS
/* ── HEX — most common for web ─────────── */color: #ff6b35; /* #RRGGBB — two hex digits per channel */color: #ff6b3580; /* #RRGGBBAA — last two = alpha (00–FF) */color: #f63; /* shorthand #RGB — same as #ff6633 */color: #f638; /* shorthand #RGBA *//* ── RGB ───────────────────────────────── */color: rgb(255, 107, 53);color: rgba(255, 107, 53, 0.5); /* alpha: 0 = transparent, 1 = opaque */color: rgb(255 107 53 / 50%); /* modern space-separated syntax *//* ── HSL — most intuitive to adjust ────── */color: hsl(18, 100%, 60%); /* ↑ ↑ ↑ */ /* hue sat lightness */ /* 0–360 0–100% 0–100% */ /* hue: 0=red, 60=yellow, 120=green, */ /* 180=cyan, 240=blue, 300=magenta */color: hsla(18, 100%, 60%, 0.5);color: hsl(18 100% 60% / 50%); /* modern syntax *//* ── Named colours ─────────────────────── */color: tomato; /* 148 named CSS colours */color: rebeccapurple; /* added in honour of Eric Meyer's daughter */color: transparent; /* rgba(0,0,0,0) */color: currentColor; /* inherits the element's color value *//* ── Tips ───────────────────────────────── *//* HEX is best for copy-pasting from design tools *//* HSL is best for programmatic adjustments *//* Use rgba() when you need transparency *//* CSS variables make colour themes easy: */:root { --brand: #2d6aff; }button { background: var(--brand); }