CSS Cheat Sheet

Selectors, specificity, the box model, units, colours, text, display, position, responsive design, variables and animation.

Updated October 24, 2026

Adding CSS#

HTML

<link rel="stylesheet" href="styles.css">          <!-- external: the usual way -->
<style> p { color: #333; } </style>                 <!-- internal -->
<p style="color: crimson">Inline</p>                <!-- inline: avoid -->

Selectors#

Selector	Matches
`p`, `.card`, `#logo`, `*`	Element, class, id, everything
`.btn.primary`	Both classes
`nav a`	`a` anywhere inside `nav`
`ul > li`	Direct children
`h2 + p` / `h2 ~ p`	Next sibling / all later siblings
`[type="email"]`, `[href^="https"]`, `[href$=".pdf"]`, `[class*="col"]`	Attributes
`:hover`, `:focus-visible`, `:active`, `:checked`, `:disabled`, `:user-invalid`	States
`:first-child`, `:last-child`, `:nth-child(2n)`, `:nth-of-type(3)`, `:not(.x)`	Structure
`:is(h1, h2)`, `:where(.x)` (no specificity), `.card:has(img)`	Modern selectors
`::before`, `::after`, `::placeholder`, `::marker`, `::selection`	Pseudo-elements

Cascade and specificity#

Origin and !important, then cascade layers, then specificity, then order (last wins).
Specificity = (ids, classes/attributes/pseudo-classes, elements): #nav a (1,0,1) beats .menu a (0,1,1).
Inline styles beat selectors. Keep specificity low: style with single classes.
Inherited: color, font-*, line-height, text-align. Not inherited: margin, padding, border, background, width.

Box model#

CSS

*, *::before, *::after { box-sizing: border-box; }   /* width includes padding + border */

.card {
  width: min(100%, 360px);
  padding: 16px 24px;            /* top/bottom left/right */
  margin: 0 auto 16px;           /* top, left/right, bottom: centers a block */
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: auto;                /* visible | hidden | clip | scroll | auto */
}

Shorthand order: top, right, bottom, left (clockwise). Vertical margins between blocks collapse to the larger value.

Units#

Unit	Relative to	Use for
`px`	Nothing (fixed)	Borders, shadows
`rem`	Root font size	Font sizes, spacing
`em`	Element's font size	Padding that scales with text
`%`	Parent	Widths
`vw`, `vh`, `dvh`	Viewport	Full-screen sections
`ch`	Width of "0"	Line length: `max-width: 65ch`
`fr`	Free space in Grid	Grid columns

clamp(1.5rem, 4vw + 0.5rem, 3rem), min(100% - 2rem, 900px), calc(100% - 80px).

Colours and backgrounds#

CSS

color: #2f5fe0;  color: rgb(47 95 224 / 0.8);  color: hsl(220 75% 53%);  color: oklch(0.6 0.2 260);
background: linear-gradient(135deg, #2f5fe0, #9b5de5);
background: url("hero.jpg") center / cover no-repeat;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
opacity: 0.8;  filter: grayscale(1);  backdrop-filter: blur(8px);

Text contrast: at least 4.5:1 for normal text.

Text#

CSS

font-family: system-ui, sans-serif;  font-size: 1rem;  font-weight: 600;  line-height: 1.5;
text-align: center;  text-transform: uppercase;  letter-spacing: 0.05em;
text-decoration-thickness: 2px;  text-underline-offset: 3px;
white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;   /* one-line truncation */

Display and position#

`display`	Behaviour
`block` / `inline` / `inline-block`	New line and full width / in text / in text with a size
`flex` / `grid`	Layout containers for children
`none`	Removed (use `visibility: hidden` to keep space)

`position`	Placed relative to
`relative`	Its normal place (and reference for absolute children)
`absolute`	Nearest positioned ancestor
`fixed`	Viewport
`sticky`	Scrolls, then sticks at `top: 0`

inset: 0 fills the positioned parent. z-index needs positioning; watch for stacking contexts (opacity, transform).

Responsive#

CSS

img { max-width: 100%; height: auto; }

.layout { display: grid; gap: 1rem; }
@media (min-width: 768px) { .layout { grid-template-columns: 240px 1fr; } }

@media (prefers-color-scheme: dark) { :root { --bg: #0d1117; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

.wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { display: flex; } }

Variables, transitions and animations#

CSS

:root { --brand: #2f5fe0; --radius: 8px; }
.btn { background: var(--brand); border-radius: var(--radius, 6px); }

.btn { transition: transform 0.2s ease-out, background-color 0.2s; }
.btn:hover { transform: translateY(-2px); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }

Animate transform and opacity for smoothness.

Want the full explanations? Go to the Learn CSS course →