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

pxptcm%emremvwvhvminvmaxdvhsvhchex

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

.container { display: flex; flex-direction: row; flex-direction: column; flex-direction: row-reverse; flex-direction: column-reverse; justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between;justify-content: space-around; justify-content: space-evenly; align-items: stretch; align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; align-content: flex-start | center | space-between | stretch; gap: 1rem; row-gap: 1rem; column-gap: 1.5rem; }.item { flex-grow: 0; flex-shrink: 1; flex-basis: auto; flex: 1; flex: none; flex: 0 0 200px; order: 0; align-self: center; }

CSS Grid

All the key CSS Grid properties for two-dimensional layouts — the best tool for page structure, galleries, and dashboards.

CSS

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: 200pxauto1fr; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-rows: auto; grid-template-rows: 80px 1fr 60px; gap: 1rem; row-gap: 1.5rem; column-gap: 1rem; grid-template-areas: "header header header""sidebar main main""footer footer footer";}.item { grid-column: 1 / 3; grid-column: span2; grid-column: 1 / -1; grid-row: 1 / 3; grid-row: span2; grid-area: header; 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

color: #ff6b35; color: #ff6b3580; color: #f63; color: #f638; color: rgb(255, 107, 53);color: rgba(255, 107, 53, 0.5); color: rgb(255 107 53 / 50%); color: hsl(18, 100%, 60%); color: hsla(18, 100%, 60%, 0.5);color: hsl(18 100% 60% / 50%); color: tomato; color: rebeccapurple; color: transparent; color: currentColor; :root { --brand: #2d6aff; }button { background: var(--brand); }