142 commands · 9 cheat sheets · CSS
Foundations and Cascade master quick reference
Browse 142 commands from 9 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Foundations and Cascade · 16 commands
CSS Box Model and Sizing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use predictable sizing | *, *::before, *::after { box-sizing: border-box; } | View examples |
| Use content-box | .sample { box-sizing: content-box; } | View examples |
| Add logical padding | .card { padding-block: 1rem; padding-inline: 1.5rem; } | View examples |
| Draw a border | .card { border: 1px solid #94a3b8; } | View examples |
| Add logical margin | .section { margin-block: 2rem; } | View examples |
| Center a constrained block | .panel { max-inline-size: 60rem; margin-inline: auto; } | View examples |
| Set logical dimensions | .sidebar { inline-size: 18rem; block-size: 100%; } | View examples |
| Fill but do not overflow | .content { inline-size: 100%; max-inline-size: 70rem; } | View examples |
| Clamp a preferred size | .dialog { inline-size: min(32rem, calc(100% - 2rem)); } | View examples |
| Use minimum intrinsic size | .label { inline-size: min-content; } | View examples |
| Use maximum intrinsic size | .badge { inline-size: max-content; } | View examples |
| Cap intrinsic growth | .menu { inline-size: fit-content(24rem); } | View examples |
| Reserve an aspect ratio | .thumbnail { aspect-ratio: 16 / 9; } | View examples |
| Crop replaced content | img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
} | View examples |
| Scroll only when needed | .log { max-block-size: 20rem; overflow: auto; } | View examples |
| Allow a flex item to shrink | .flex-child { min-inline-size: 0; } | View examples |
Foundations and Cascade · 11 commands
CSS Cascade, Inheritance, and Layers Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare layer order | @layer reset, base, components, utilities; | View examples |
| Add rules to a layer | @layer components { .button { color: white; } } | View examples |
| Layer an import | @import url('vendor.css') layer(vendor); | View examples |
| Match with zero specificity | :where(nav a) { color: inherit; } | View examples |
| Use strongest branch specificity | :is(#app, .shell) button { padding: .5rem; } | View examples |
| Force inheritance | button { font: inherit; } | View examples |
| Use property initial value | .panel { display: initial; } | View examples |
| Inherit or initialize | .item { color: unset; } | View examples |
| Roll back the current origin | .widget { all: revert; } | View examples |
| Roll back the current layer | .button { color: revert-layer; } | View examples |
| Mark an important declaration | .sr-only { position: absolute !important; } | View examples |
Foundations and Cascade · 15 commands
CSS Custom Properties Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Define a global property | :root { --color-accent: #0f766e; } | View examples |
| Use a custom property | .link { color: var(--color-accent); } | View examples |
| Provide a fallback | .card { color: var(--card-text, #111827); } | View examples |
| Chain fallbacks | .card {
color: var(--card-text, var(--color-text, #111827));
} | View examples |
| Allow an empty fallback | .icon::after { content: var(--icon-label,); } | View examples |
| Set a component default | .button {
--button-bg: #334155;
background: var(--button-bg);
} | View examples |
| Override a component token | .button--primary { --button-bg: #0f766e; } | View examples |
| Use an inherited token | .button__icon { fill: var(--button-bg); } | View examples |
| Calculate from a token | .stack { gap: calc(var(--space-unit) * 3); } | View examples |
| Compose several tokens | .panel {
box-shadow:
var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
} | View examples |
| Override a dark theme | [data-theme="dark"] {
--surface: #111827;
--text: #f8fafc;
} | View examples |
| Seed a preferred theme | @media (prefers-color-scheme: dark) {
:root { --surface: #111827; --text: #f8fafc; };
} | View examples |
| Register a typed property | @property --progress {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
} | View examples |
| Animate a registered property | .meter { transition: --progress 300ms ease; } | View examples |
| Respect name casing | :root { --brand: teal; --Brand: navy; } | View examples |
Foundations and Cascade · 18 commands
CSS display, flow-root, and contents Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Block flow container | .panel { display: block flow; } | View examples |
| Inline formatting root | .badge { display: inline flow-root; } | View examples |
| Compatible inline block | .badge { display: inline-block; } | View examples |
| Explicit block formatting context | .group { display: flow-root; } | View examples |
| Contain floated media | .card {
display: flow-root;
} .card img { float: inline-start;;
} | View examples |
| Stop child margin collapse | .section { display: flow-root; } | View examples |
| Remove only the principal box | .wrapper { display: contents; } | View examples |
| Expose children to a grid | .grid-group { display: contents; } | View examples |
| Layer a structural fallback | .group {
display: block;
} @supports (display:
contents) { .group { display: contents; };
} | View examples |
| Remove subtree from layout | .is-removed { display: none; } | View examples |
| Use semantic hidden state | [hidden] { display: none; } | View examples |
| Keep text for assistive tech | .sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
} | View examples |
| Generate a marker box | .step {
display: list-item;
list-style-position: inside;
} | View examples |
| Use table-internal display | .cell { display: table-cell; vertical-align: middle; } | View examples |
| Expect flex item blockification | .row { display: flex; } .row > span { display: inline; } | View examples |
| Inspect computed display | getComputedStyle(node).display | View examples |
| Keep focus on a generated box | .wrapper:focus-visible {
outline: 3px solid CanvasText;
} | View examples |
| Restore boxes for print | @media print { .screen-contents { display: block; } } | View examples |
Foundations and Cascade · 18 commands
CSS Properties and Values API Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Register a length | @property --gap {
syntax: "<length>";
inherits: false;
initial-value: 0px;
} | View examples |
| Register a color | @property --accent {
syntax: "<color>";
inherits: true;
initial-value: #2563eb;
} | View examples |
| Register a number | @property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
} | View examples |
| Accept any token stream | @property --payload { syntax: "*"; inherits: false; } | View examples |
| Allow alternative types | @property --offset {
syntax: "<length> | auto";
inherits: false;
initial-value: 0px;
} | View examples |
| Register a space list | @property --stops {
syntax: "<color>+";
inherits: true;
initial-value: transparent;
} | View examples |
| Register from JavaScript | CSS.registerProperty( {
name:
"--angle", syntax: "<angle>", inherits: false, initialValue: "0deg";
} | View examples |
| Detect JavaScript registration | if ("registerProperty" in CSS) { registerTokens(); } | View examples |
| Handle duplicate registration | try {
CSS.registerProperty(definition);
} catch (error) { console.warn(error.name);;
} | View examples |
| Animate a registered angle | .loader { transition: --angle 600ms linear; } | View examples |
| Use a typed value in a gradient | .loader {
background:
conic-gradient(from var(--angle), #2563eb, transparent);
} | View examples |
| Drive a calculation | .bar {
scale: var(--progress) 1;
transform-origin: left;
} | View examples |
| Fall back after invalid assignment | .card { --gap: red; gap: var(--gap); } | View examples |
| Request inheritance | .child { --gap: inherit; } | View examples |
| Reset to registered initial | .component { --progress: initial; } | View examples |
| Keep an unregistered fallback | .card {
--accent: #2563eb;
color: var(--accent, #2563eb);
} | View examples |
| Stop typed-property motion | @media (prefers-reduced-motion: reduce) {
.loader { transition: none; };
} | View examples |
| Find @property CSSOM rules | [...sheet.cssRules].filter(rule => rule.constructor.name === "CSSPropertyRule") | View examples |
Foundations and Cascade · 20 commands
CSS Selectors Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Select by element type | article { max-inline-size: 70ch; } | View examples |
| Select by class | .notice { border-inline-start: 4px solid teal; } | View examples |
| Select by ID | #summary { scroll-margin-block-start: 2rem; } | View examples |
| Group selectors | h1, h2, h3 { text-wrap: balance; } | View examples |
| Match an attribute | button[disabled] { cursor: not-allowed; } | View examples |
| Match an exact value | input[type="email"] { inline-size: 100%; } | View examples |
| Match a token | [class~="featured"] { outline: 2px solid gold; } | View examples |
| Select a descendant | .card a { color: navy; } | View examples |
| Select a direct child | .menu > li { display: inline-block; } | View examples |
| Select the next sibling | h2 + p { margin-block-start: 0; } | View examples |
| Select later siblings | h2 ~ p { max-inline-size: 65ch; } | View examples |
| Style keyboard focus | .button:focus-visible {
outline: 3px solid currentColor;
} | View examples |
| Style checked controls | input:checked + label { font-weight: 700; } | View examples |
| Select the first child | .steps > li:first-child { margin-block-start: 0; } | View examples |
| Select alternating children | tbody > tr:nth-child(even) { background: #f3f4f6; } | View examples |
| Exclude a match | .tag:not(.tag--muted) { color: darkgreen; } | View examples |
| Group with zero weight | :where(nav, aside) a {
text-decoration-thickness: 0.12em;
} | View examples |
| Match through a descendant | .field:has(input:invalid) { border-color: crimson; } | View examples |
| Create generated decoration | .external::after { content: " ↗"; } | View examples |
| Style selected text | ::selection { background: gold; color: black; } | View examples |
Foundations and Cascade · 14 commands
CSS Values, Units, and Math Functions Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Scale from the root font | .prose { font-size: 1rem; max-inline-size: 68ch; } | View examples |
| Scale a component locally | .badge { padding: 0.25em 0.75em; border-radius: 1em; } | View examples |
| Reserve by line height | .excerpt { min-block-size: 3lh; } | View examples |
| Use physical units for print | @media print { @page { margin: 15mm; } } | View examples |
| Follow the dynamic viewport | .screen { min-block-size: 100dvh; } | View examples |
| Provide a viewport fallback | .hero { min-height: 100vh; min-height: 100svh; } | View examples |
| Scale inside a container | .card { padding: clamp(1rem, 4cqi, 2rem); } | View examples |
| Combine compatible dimensions | .main { inline-size: calc(100% - 2rem); } | View examples |
| Bound a fluid value | h1 { font-size: clamp(2rem, 1rem + 4vw, 4.5rem); } | View examples |
| Enforce a useful minimum | .sidebar { inline-size: max(18rem, 25%); } | View examples |
| Round to an interval | .meter { inline-size: round(down, 83%, 10%); } | View examples |
| Gate newer math | @supports (width: round(1px, 1px)) {
.meter { width: round(down, 83%, 10%); };
} | View examples |
| Register a numeric token | @property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
} | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
:root { --motion-scale: 0; };
} | View examples |
Foundations and Cascade · 14 commands
CSSOM and Constructable Stylesheets Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Set one inline declaration | element.style.setProperty("--accent", "#2563eb"); | View examples |
| Read a resolved value | const display = getComputedStyle(element).display; | View examples |
| Inspect a pseudo-element | const content = getComputedStyle(element, ":
:before").content; | View examples |
| Enumerate document sheets | for (const sheet of document.styleSheets) console.log(sheet.href); | View examples |
| Insert a complete rule | const index = sheet.insertRule(".notice {
color: #b91c1c;
} | View examples |
| Delete by rule index | sheet.deleteRule(index); | View examples |
| Construct a stylesheet | const themeSheet = new CSSStyleSheet(); | View examples |
| Replace rules synchronously | themeSheet.replaceSync(":host { color: CanvasText; }"); | View examples |
| Replace rules asynchronously | await themeSheet.replace(cssText); | View examples |
| Adopt into a shadow root | shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, themeSheet]; | View examples |
| Set a typed length | element.attributeStyleMap.set("padding-top", CSS.px(16)); | View examples |
| Detect stylesheet adoption | const canAdopt = "adoptedStyleSheets" in Document.prototype && "replaceSync" in CSSStyleSheet.prototype; | View examples |
| Batch theme tokens | for (const [name, value] of Object.entries(tokens)) root.style.setProperty(name, value); | View examples |
| Prefer a class for state | document.documentElement.classList.toggle("theme-dark", isDark); | View examples |
Foundations and Cascade · 16 commands
Native CSS Nesting Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Nest a descendant | .card { .card__title { margin-block: 0; } } | View examples |
| Nest a direct child | .card { > img { inline-size: 100%; } } | View examples |
| Nest an adjacent sibling | .card { + .card { margin-block-start: 1rem; } } | View examples |
| Append a pseudo-class | .button { &:hover { background: #1d4ed8; } } | View examples |
| Require another class | .card { &.featured { border-color: #f59e0b; } } | View examples |
| Place context before parent | .card { .theme-dark & { background: #172033; } } | View examples |
| Nest a selector list | .field {
> input, > select, > textarea { inline-size: 100%; };
} | View examples |
| Account for parent specificity | .card, #featured-card { & .title { color: navy; } } | View examples |
| Keep parent weight low | :where(.card, #featured-card) {
& .title { color: navy; };
} | View examples |
| Put declarations first | .card {
color: #172033;
padding: 1rem;
& > h2 { margin: 0; };
} | View examples |
| Nest a media query | .card-grid {
@media (width >= 48rem) { grid-template-columns:
repeat(3, 1fr); };
} | View examples |
| Nest a feature query | .card {
@supports (text-wrap:
balance) { & > h2 { text-wrap: balance; } };
} | View examples |
| Nest a container query | .card {
@container (width > 30rem) { grid-template-columns:
8rem 1fr; };
} | View examples |
| Detect nesting support | @supports selector(&) {
.card { > .card__title { text-wrap: balance; } };
} | View examples |
| Provide a flat baseline | .card > .card__title { line-height: 1.2; } | View examples |
| Keep selector depth shallow | .dialog {
> header { } > .dialog__body { } > footer { };
} | View examples |