771 commands · 48 cheat sheets · 6 subcategories
CSS master quick reference
Browse 195 commands from 12 focused cheat sheets on page 1 of 4. 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 |
Layout and Sizing · 16 commands
CSS Anchor Positioning Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Name an anchor | .trigger { anchor-name: --menu-trigger; } | View examples |
| Select the default anchor | .menu { position-anchor: --menu-trigger; } | View examples |
| Enable anchored positioning | .menu { position: fixed; } | View examples |
| Place below | .menu { position-area: block-end span-inline-end; } | View examples |
| Place above | .tooltip { position-area: block-start center; } | View examples |
| Read an anchor edge | .callout {
inset-block-start: anchor(--target block-end, 0px);
} | View examples |
| Center on an anchor | .callout {
inset-inline-start: anchor(--target center);
translate: -50% 0;
} | View examples |
| Match anchor width | .menu { inline-size: anchor-size(inline, 12rem); } | View examples |
| Bound popup size | .menu {
max-inline-size: min(24rem, calc(100vi - 2rem));
} | View examples |
| Flip across block axis | .menu { position-try-fallbacks: flip-block; } | View examples |
| Declare fallback order | .menu {
position-try-fallbacks:
flip-block, flip-inline, --compact;
} | View examples |
| Prefer available height | .menu { position-try-order: most-height; } | View examples |
| Define a custom option | @position-try --compact {
position-area: block-end;
max-block-size: 12rem;
} | View examples |
| Hide invalid placement | .tooltip {
position-visibility: anchors-visible no-overflow;
} | View examples |
| Scope repeated names | .widget { anchor-scope: --trigger; } | View examples |
| Guard enhancement | @supports (anchor-name: --a) {
.enhanced { position-area: block-end; };
} | View examples |
Layout and Sizing · 18 commands
CSS aspect-ratio and Replaced Elements Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Set a preferred ratio | .card { aspect-ratio: 16 / 9; } | View examples |
| Create a square | .avatar { inline-size: 4rem; aspect-ratio: 1; } | View examples |
| Use natural ratio when present | .media { aspect-ratio: auto; } | View examples |
| Fallback until media loads | img { aspect-ratio: auto 4 / 3; } | View examples |
| Declare intrinsic image dimensions | <img src="chart.png" width="1200" height="800" alt="Quarterly revenue chart"> | View examples |
| Scale media responsively | img { max-inline-size: 100%; block-size: auto; } | View examples |
| Fill and crop a media box | .thumb {
inline-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
} | View examples |
| Fit without cropping | .diagram {
inline-size: 100%;
aspect-ratio: 16 / 9;
object-fit: contain;
} | View examples |
| Move the crop focal point | .portrait {
object-fit: cover;
object-position: 50% 20%;
} | View examples |
| Apply ratio to the border box | .tile {
box-sizing: border-box;
inline-size: 18rem;
aspect-ratio: 1;
padding: 1rem;
} | View examples |
| Bound a ratio box | .preview {
inline-size: 100%;
max-block-size: 70vh;
aspect-ratio: 16 / 9;
} | View examples |
| Use ratio in responsive grid | .grid {
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
} | View examples |
| Let a ratio item shrink | .media {
flex: 1 1 18rem;
min-inline-size: 0;
aspect-ratio: 4 / 3;
} | View examples |
| Size a responsive iframe | .embed {
inline-size: 100%;
aspect-ratio: 16 / 9;
border: 0;
} | View examples |
| Provide a legacy ratio box | .frame {
position: relative;
padding-block-start: 56.25%;
} | View examples |
| Keep dimensions with lazy loading | <img src="photo.jpg" width="800" height="600" loading="lazy" alt="Forest trail at dawn"> | View examples |
| Avoid cropping meaningful diagrams | .diagram { object-fit: contain; background: Canvas; } | View examples |
| Use logical width constraints | .figure {
inline-size: min(100%, 32rem);
aspect-ratio: 3 / 2;
} | View examples |
Layout and Sizing · 19 commands
CSS Box Alignment, Baselines, and Safe Positioning Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Align every item on the cross axis | .row { align-items: center; } | View examples |
| Align grid items on the inline axis | .grid { justify-items: start; } | View examples |
| Distribute cross-axis tracks | .grid { align-content: space-between; } | View examples |
| Distribute main or inline content | .row { justify-content: space-between; } | View examples |
| Set both item axes | .grid { place-items: center start; } | View examples |
| Set both distribution axes | .grid { place-content: space-between center; } | View examples |
| Override one item | .featured { place-self: stretch center; } | View examples |
| Create layout-owned spacing | .cluster {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
} | View examples |
| Align first text baselines | .cards { align-items: first baseline; } | View examples |
| Align last text baselines | .cards { align-items: last baseline; } | View examples |
| Align form labels and controls | .field-row {
display: grid;
grid-template-columns: 10rem 1fr;
align-items: first baseline;
} | View examples |
| Center without start-side data loss | .dialog { justify-self: safe center; } | View examples |
| Permit positional overflow | .decoration { align-self: unsafe end; } | View examples |
| Protect a flex alignment | .toolbar { justify-content: safe flex-end; } | View examples |
| Push one flex item | .actions .primary { margin-inline-start: auto; } | View examples |
| Stretch an auto-sized item | .grid { align-items: stretch; } | View examples |
| Follow writing direction | .toolbar { justify-content: start; } | View examples |
| Keep source order meaningful | .layout {
display: grid;
grid-template-areas: "nav main";
} | View examples |
| Layer safe alignment support | .panel {
justify-self: start;
} @supports (justify-self:
safe center) { .panel { justify-self: safe center; };
} | View examples |