CSS cheat sheet

A scannable CSS reference: 33 short snippets across 14 topics, each linking back to the lesson it came from.

At a glance

Topic	What it covers
CSS: getting started	Whitespace and line breaks are free — format for readability. Every declaration ends with a semicolon; forgetting one	lesson
Selectors and specificity	Think of specificity as three counters — (inline, IDs, classes) then element count. Compare left to right; the first	lesson
The box model	Every element renders as a rectangular box. From the inside out: content, padding, border, margin	lesson
Flexbox	Flexbox lays items along a single line — the main axis (flex-direction) with the cross axis perpendicular to it. Row	lesson
CSS Grid	Items are placed automatically into the next free cell. Use grid-auto-flow: dense if you want later small items to	lesson
Responsive design	Without this tag, mobile browsers render at roughly 980px wide and zoom out, so none of your media queries fire	lesson
Typography, fonts and fluid type	Typography is most of what people read on a page, and most of its cost is bytes. A system font stack costs nothing and	lesson
Color, backgrounds and dark mode	Every color notation can express the same pixel, so choose the one whose numbers mean something to a human. Hex is	lesson
Units, custom properties and calc	A unit is a statement about what the value should follow. Sizing in rem tracks the user's font preference, in em tracks	lesson
Positioning, stacking and overflow	Sticky elements need an inset threshold such as top: 0 to have a position to stick at, and they only travel within	lesson
Transitions, transforms and animation	A transition interpolates between two values of the same property. It fires when a computed value changes, which is why	lesson
Modern selectors and cascade control	Three functional pseudo-classes removed most of the reasons to write long selector lists. :is() groups alternatives	lesson
CSS architecture, naming and design tokens	A naming convention is not about aesthetics. It exists so that anyone can guess a class name correctly, and so that	lesson
Debugging CSS, resets and browser support	The Styles pane shows every rule that matched and what it currently resolves to; the Computed pane shows the one value	lesson

Quick snippets

CSS: getting started

Three ways to attach CSS

<head>
  <link rel='stylesheet' href='/assets/app.css'>
</head>

Anatomy of a rule

/* selector { declaration; declaration } */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

The cascade (why your style is ignored)

#nav .link { color: blue; }   /* id + class  → highest */
.link        { color: red; }    /* class       */
a            { color: teal; }   /* element     */

Full lesson: CSS: getting started →

Selectors and specificity

Core selectors

/* AND: both classes on the same element */
.btn.primary { }

/* descendants vs direct children */
.nav a   { }  /* any depth inside .nav */
.nav > a { }  /* only one level down  */

/* siblings */
h2 + p { }  /* the paragraph right after an h2 */
h2 ~ p { }  /* every paragraph after an h2     */

Writing selectors that survive

/* flat and predictable */
.card { }
.card--featured { }

/* grouped with :is() */
:is(h1, h2, h3) { line-height: 1.2; }

Full lesson: Selectors and specificity →

The box model

Four layers per box

.card {
  width: 300px;
  padding: 16px;
  border: 1px solid #ddd;
  margin: 24px;
  box-sizing: border-box; /* width includes padding + border */
}

The sizing math

*, *::before, *::after { box-sizing: border-box; }

Margin collapsing

p { margin: 0 0 16px; }  /* 16px between paragraphs, not 32px */

.stack { display: flow-root; } /* stops parent/child collapsing */

Full lesson: The box model →

Flexbox

Think in one axis

.row {
  display: flex;
  gap: 12px;
  justify-content: space-between; /* along main   */
  align-items: center;            /* across cross */
}

Item properties

.item {
  flex: 1 1 200px;   /* grow shrink basis */
}
.item--fixed { flex: 0 0 auto; }
.push-right  { margin-left: auto; }

Wrapping and common gotchas

.wrap { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 240px; min-width: 0; } /* min-width lets text shrink */

Full lesson: Flexbox →

CSS Grid

Defining tracks

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto;
  gap: 16px;
}

Placing items

/* by line number: lines are counted, not tracks */
.panel { grid-column: 1 / 3; grid-row: 1; }

/* by named area */
.page {
  grid-template-areas:
    'head  head'
    'side  main'
    'foot  foot';
  grid-template-columns: 240px 1fr;
}
.page > header { grid-area: head; }

Responsive without media queries

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

Full lesson: CSS Grid →

Responsive design

Start with the viewport meta

<meta name='viewport' content='width=device-width, initial-scale=1'>

Media queries

/* mobile-first: base styles, then add at wider widths */
.card { padding: 12px; }

@media (min-width: 768px) {
  .card { padding: 24px; }
}

/* combinations */
@media (min-width: 768px) and (max-width: 1023px) { }
@media (prefers-reduced-motion: reduce) { * { animation: none; } }

Fluid values replace many breakpoints

:root {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
.wrap { width: min(1200px, 100% - 2rem); margin-inline: auto; }

Full lesson: Responsive design →

Typography, fonts and fluid type

Line-height, measure and wrapping

.prose {
  font-size: 1.125rem;    /* 18px when the root is 16px */
  line-height: 1.6;       /* unitless: multiplied by each element's own size */
  max-inline-size: 68ch;  /* the measure: roughly 60 to 75 characters */
}

h2 { text-wrap: balance; }
p  { text-wrap: pretty; }
td { font-variant-numeric: tabular-nums; }

Fluid type with clamp

h1    { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
.lede { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); }
h2    { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }

Full lesson: Typography, fonts and fluid type →

Color, backgrounds and dark mode

Color notations that communicate intent

:root {
  --brand: oklch(56% 0.17 258);
  --brand-soft: color-mix(in oklch, var(--brand) 15%, white);
  --brand-text: oklch(38% 0.14 258);
}

Full lesson: Color, backgrounds and dark mode →

Units, custom properties and calc

Pick a unit per job

.card { padding: 1.5rem; }

.card :is(h2, p) { margin-block: 0.75em; }  /* scales with each element's own size */

.hero { min-height: 100dvh; }

.prose { max-inline-size: 68ch; }

Custom properties are inherited values

:root { --space-3: 1rem; }

.card { padding: var(--space-3, 1rem); }  /* fallback if undefined */

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.spinner { transform: rotate(var(--angle)); }

Full lesson: Units, custom properties and calc →

Positioning, stacking and overflow

z-index and stacking contexts

.modal  { position: fixed; z-index: 100; }
.tooltip { position: absolute; z-index: 200; }  /* still behind the modal if trapped */

.card { isolation: isolate; }   /* deliberate, explicit stacking context */

Overflow, scroll containers and aspect ratio

.scroller {
  overflow: auto;
  max-block-size: 60vh;
  overscroll-behavior: contain;  /* do not chain scrolling to the page */
}

.thumb {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;             /* crop instead of distort */
}

Full lesson: Positioning, stacking and overflow →

Transitions, transforms and animation

Transitions need a state change

.btn {
  background-color: var(--brand);
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.btn:hover { background-color: oklch(50% 0.17 258); transform: translateY(-1px); }

.panel { transition: opacity 200ms ease-out, transform 200ms ease-out; }
.panel[hidden] { opacity: 0; transform: translateY(-4px); }

Transforms and 3D

.card:hover   { transform: translateY(-4px) scale(1.02); }
.spinner      { animation: spin 1s linear infinite; }
.flip         { transform: perspective(800px) rotateY(180deg); transform-style: preserve-3d; }
.avatar       { transform: rotate(-3deg); transform-origin: center bottom; }

@keyframes spin { to { transform: rotate(360deg); } }

Full lesson: Transitions, transforms and animation →

Modern selectors and cascade control

is, where and has

:is(h1, h2, h3) { line-height: 1.15; }     /* specificity of the most specific argument */
:where(ul, ol)[class] { list-style: none; }  /* zero specificity — trivially overridden */

.card:has(> img) { padding-block-start: 0; }
.form:has(:invalid) { border-color: var(--danger); }
li:nth-child(3 of .featured) { font-weight: 600; }

Native nesting

.card {
  padding: 1rem;

  & .title { font-size: 1.25rem; }
  &:hover  { box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); }
  &[data-state="open"] { border-color: var(--brand); }

  @media (min-width: 48rem) { padding: 2rem; }
}

Full lesson: Modern selectors and cascade control →

CSS architecture, naming and design tokens

Naming for predictability

/* block, element, modifier */
.card { }
.card__title { }
.card--featured { }

/* state that JavaScript toggles */
.toolbar[data-state="open"] { }

/* single-purpose utility */
.u-stack-2 > * + * { margin-block-start: var(--space-2); }

File organisation and specificity discipline

/* styles/main.css */
@layer reset, base, layout, components, utilities;

@import url("./reset.css") layer(reset);
@import url("./base.css") layer(base);
@import url("./layout.css") layer(layout);
@import url("./components/button.css") layer(components);

Full lesson: CSS architecture, naming and design tokens →

Debugging CSS, resets and browser support

Reading DevTools properly

/* temporary: see where every box actually is */
* { background-color: rgb(255 0 0 / 0.06); }

/* temporary: catch an overflowing child inside a container */
.debug-overflow * { outline: 1px solid hotpink; }

Hunting overflow and collapsed margins

/* the symptom, not the cause */
body { overflow-x: hidden; }

/* real fixes */
img, video { max-inline-size: 100%; height: auto; }
.grid > * { min-inline-size: 0; }
pre, table { max-inline-size: 100%; overflow-x: auto; }
.stack  { display: flow-root; }   /* contains child margins */

Resets and browser support

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; }
:where(ul, ol)[class] { list-style: none; padding: 0; }

Full lesson: Debugging CSS, resets and browser support →

FAQ

Is this CSS cheat sheet free to use?

Yes. No sign-up and no tracking: the page is static, every example is on the page itself, and you can print it or save it as a one-page reference.

Where do the examples come from?

Every snippet is taken from the 14 lessons of the CSS course on this site, and each section links back to the lesson it was pulled from.

How do I go deeper than a cheat sheet?

Open the full CSS course — it carries the worked explanations, the edge cases and the exercises behind every line here.

HTML JavaScript TypeScript HTML DOM AJAX JSON

Last refreshed 2026-09-27.