118 commands · 7 cheat sheets · CSS
Typography and Content master quick reference
Browse 118 commands from 7 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Typography and Content · 16 commands
CSS Generated Content, Counters, Quotes, and Markers Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Insert content before | .note::before { content: "Note: "; } | View examples |
| Read an attribute | .tag::after { content: " [" attr(data-state) "]"; } | View examples |
| Suppress generated content | .note:empty::before { content: none; } | View examples |
| Generate a line break | .label::after { content: "\A"; white-space: pre; } | View examples |
| Create a counter | .procedure { counter-reset: step; } | View examples |
| Increment a counter | .procedure > li { counter-increment: step; } | View examples |
| Render a counter | .procedure > li::marker {
content: "Step " counter(step) ": ";
} | View examples |
| Choose a counter style | .appendix::before {
content: counter(appendix, upper-alpha) ". ";
} | View examples |
| Scope nested counters | .outline, .outline ol { counter-reset: item; } | View examples |
| Render the counter chain | .outline li::marker {
content: counters(item, ".") " ";
} | View examples |
| Define quote pairs | :lang(fr) { quotes: "« " " »" "‹ " " ›"; } | View examples |
| Generate quotation marks | .quotation::before {
content: open-quote;
} .quotation::after { content: close-quote;;
} | View examples |
| Style list markers | .tasks > li::marker {
color: #0f766e;
font-weight: 700;
} | View examples |
| Replace marker content | .tasks > li::marker { content: "✓ "; } | View examples |
| Use native list numbering | ol > li::marker { content: counter(list-item) ". "; } | View examples |
| Keep essential text in HTML | <button><span aria-hidden="true">✓</span> Save changes</button> | View examples |
Typography and Content · 15 commands
CSS List Markers and Counter Styles Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Choose an unordered marker | .features { list-style-type: square; } | View examples |
| Choose an ordered style | .chapters { list-style-type: upper-roman; } | View examples |
| Keep markers outside | .checklist { list-style-position: outside; } | View examples |
| Style marker text | .checklist > li::marker {
color: #0f766e;
font-weight: 700;
} | View examples |
| Provide an image fallback | .links { list-style: circle outside url("arrow.svg"); } | View examples |
| Disable marker images | .plain { list-style-image: none; } | View examples |
| Use a short string marker | .steps { list-style-type: "→ "; } | View examples |
| Define a cyclic style | @counter-style status-dot {
system: cyclic;
symbols: "●";
suffix: " ";
fallback: disc;
} | View examples |
| Define fixed symbols | @counter-style circled-step {
system: fixed;
symbols: "①" "②" "③";
suffix: " ";
fallback: decimal;
} | View examples |
| Apply a named style | .milestones { list-style-type: circled-step; } | View examples |
| Create an anonymous style | .tags { list-style-type: symbols(cyclic "◆" "◇"); } | View examples |
| Set a list-item value | .resume-at-five { counter-set: list-item 4; } | View examples |
| Differentiate nested lists | .outline ul ul { list-style-type: circle; } | View examples |
| Feature-query ::marker | @supports selector(li::marker) {
li::marker { color: #0f766e; };
} | View examples |
| Keep real list markup | <ol><li>Download</li><li>Verify</li><li>Install</li></ol> | View examples |
Typography and Content · 20 commands
CSS Logical Properties and Writing Modes Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use horizontal lines | .copy { writing-mode: horizontal-tb; } | View examples |
| Set vertical right-to-left flow | .vertical-copy { writing-mode: vertical-rl; } | View examples |
| Set vertical left-to-right flow | .vertical-copy { writing-mode: vertical-lr; } | View examples |
| Declare RTL content | <html lang="ar" dir="rtl"> | View examples |
| Detect unknown text direction | <bdi dir="auto">اسم المستخدم</bdi> | View examples |
| Set direction outside HTML | .xml-rtl { direction: rtl; } | View examples |
| Set vertical-flow margins | .section { margin-block: 2rem 1rem; } | View examples |
| Center along the inline axis | .panel { margin-inline: auto; } | View examples |
| Pad inline edges | .button { padding-inline: 1rem; } | View examples |
| Mark the leading edge | .note { border-inline-start: 0.25rem solid #2563eb; } | View examples |
| Set inline size | .avatar { inline-size: 3rem; } | View examples |
| Limit readable measure | .prose { max-inline-size: 65ch; } | View examples |
| Set minimum block size | .empty-state { min-block-size: 12rem; } | View examples |
| Position from logical edges | .badge {
inset-block-start: 0.5rem;
inset-inline-end: 0.5rem;
} | View examples |
| Align text to line start | .label { text-align: start; } | View examples |
| Float with reading direction | .thumbnail { float: inline-start; } | View examples |
| Round the starting corner | .card { border-start-start-radius: 1rem; } | View examples |
| Keep vertical glyphs upright | .vertical-copy { text-orientation: upright; } | View examples |
| Combine short vertical text | .digits { text-combine-upright: all; } | View examples |
| Feature-query a migration | @supports (margin-inline-start: 1rem) {
.item { margin-inline-start: 1rem; };
} | View examples |
Typography and Content · 20 commands
CSS Ruby, Line Breaking, and Hyphenation Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Add a ruby annotation | <ruby>漢字<rt>かんじ</rt></ruby> | View examples |
| Add legacy fallback punctuation | <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby> | View examples |
| Declare annotation language | <ruby lang="ja">東京<rt>とうきょう</rt></ruby> | View examples |
| Place ruby underneath | ruby { ruby-position: under; } | View examples |
| Distribute ruby text | ruby { ruby-align: space-around; } | View examples |
| Disable ruby overhang | ruby { ruby-overhang: none; } | View examples |
| Enable automatic hyphenation | :lang(en) { hyphens: auto; } | View examples |
| Honor manual opportunities | .product-name { hyphens: manual; } | View examples |
| Choose the hyphen glyph | :lang(en) { hyphenate-character: auto; } | View examples |
| Constrain hyphenated fragments | .prose { hyphenate-limit-chars: 6 3 2; } | View examples |
| Wrap an unbreakable token | .token { overflow-wrap: anywhere; } | View examples |
| Use normal wrapping | .prose { overflow-wrap: normal; } | View examples |
| Break non-CJK text anywhere | .machine-output { word-break: break-all; } | View examples |
| Use strict CJK rules | :lang(ja) { line-break: strict; } | View examples |
| Loosen short-line rules | .narrow:lang(ja) { line-break: loose; } | View examples |
| Keep CJK phrases together | .short-label:lang(ko) { word-break: keep-all; } | View examples |
| Restore language defaults | .article { word-break: normal; } | View examples |
| Suggest a hyphenated break | interna­tionalization | View examples |
| Suggest a non-hyphen break | api.example.com/<wbr>v2/<wbr>reports | View examples |
| Balance a short heading | h2 { text-wrap: balance; } | View examples |
Typography and Content · 16 commands
CSS Shapes and Text Wrapping Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Wrap around a circle | .portrait {
float: inline-start;
shape-outside: circle(50%);
} | View examples |
| Give the float dimensions | .portrait { inline-size: 12rem; aspect-ratio: 1; } | View examples |
| Wrap an ellipse | .photo { shape-outside: ellipse(48% 42% at 50% 48%); } | View examples |
| Round an inset rectangle | .note { shape-outside: inset(0 8% 0 0 round 1.5rem); } | View examples |
| Wrap a polygon | .cutout {
shape-outside: polygon(0 0, 100% 0, 72% 100%, 0 100%);
} | View examples |
| Choose the fill rule | .star {
shape-outside:
polygon(evenodd, 50% 0, 100% 100%, 0 38%, 100% 38%, 0 100%);
} | View examples |
| Use SVG path data | .wave {
shape-outside:
path('M0,0 C80,20 20,180 100,200 L0,200 Z');
} | View examples |
| Use the margin edge | .pullquote { shape-outside: margin-box; } | View examples |
| Select a reference box | .portrait { shape-outside: circle(50%) content-box; } | View examples |
| Add breathing room | .portrait { shape-margin: clamp(0.5rem, 2vw, 1.25rem); } | View examples |
| Disable narrow wrapping | @media (max-width: 36rem) {
.portrait { float: none; shape-outside: none; };
} | View examples |
| Wrap image alpha | .silhouette {
shape-outside: url('/images/leaf-alpha.png');
} | View examples |
| Choose the alpha threshold | .silhouette { shape-image-threshold: 0.35; } | View examples |
| Shape from a gradient | .fade {
shape-outside:
linear-gradient(90deg, #000 65%, transparent 65%);
} | View examples |
| Match visual clipping | .portrait {
clip-path: circle(50%);
shape-outside: circle(50%);
} | View examples |
| Guard shape enhancement | @supports (shape-outside: circle(50%)) {
.portrait { shape-outside: circle(50%); };
} | View examples |
Typography and Content · 16 commands
CSS Typography and Text Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare a resilient stack | body {
font-family:
Inter, ui-sans-serif, system-ui, sans-serif;
} | View examples |
| Use scalable text | body { font-size: 1rem; } | View examples |
| Set unitless line height | body { line-height: 1.5; } | View examples |
| Select a numeric weight | strong { font-weight: 700; } | View examples |
| Use italic style | em { font-style: italic; } | View examples |
| Load a web font | @font-face {
font-family: 'Example Sans';
src: url('/fonts/example.woff2') format('woff2');
} | View examples |
| Avoid blocking text indefinitely | @font-face { font-display: swap; } | View examples |
| Limit line length | article { max-inline-size: 65ch; } | View examples |
| Align by writing direction | .copy { text-align: start; } | View examples |
| Preserve breaks and wrap | .message { white-space: pre-wrap; } | View examples |
| Keep text on one line | .label { white-space: nowrap; } | View examples |
| Break emergency overflow | .content { overflow-wrap: anywhere; } | View examples |
| Enable language-aware hyphenation | p { hyphens: auto; } | View examples |
| Show a single-line ellipsis | .title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} | View examples |
| Style an underline | a {
text-decoration: underline 0.12em;
text-underline-offset: 0.18em;
} | View examples |
| Align numeric columns | .amount { font-variant-numeric: tabular-nums; } | View examples |
Typography and Content · 15 commands
CSS Web Fonts and Variable Fonts Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare a WOFF2 face | @font-face {
font-family: 'Atlas';
src: url('/fonts/atlas.woff2') format('woff2');
font-weight: 400;
font-display: swap;
} | View examples |
| Provide a fallback stack | body {
font-family:
'Atlas', ui-sans-serif, system-ui, sans-serif;
} | View examples |
| Declare a weight range | @font-face {
font-family: 'Atlas Variable';
src: url('/fonts/atlas-var.woff2') format('woff2');
font-weight: 100 900;
} | View examples |
| Select a variable weight | .display { font-weight: 725; } | View examples |
| Enable optical sizing | .prose { font-optical-sizing: auto; } | View examples |
| Set a custom variation axis | .expressive {
font-variation-settings: 'wght' 640, 'GRAD' 80;
} | View examples |
| Keep text available during loading | @font-face {
font-family: 'Atlas';
src: url('/fonts/atlas.woff2') format('woff2');
font-display: swap;
} | View examples |
| Subset by character range | @font-face {
font-family: 'Atlas';
src: url('/fonts/atlas-latin.woff2') format('woff2');
unicode-range: U+0000-00FF;
} | View examples |
| Observe font readiness | await document.fonts.load("700 2rem 'Atlas'", 'Heading'); | View examples |
| Scale fallback glyph metrics | @font-face {
font-family: 'Atlas Fallback';
src: local('Arial');
size-adjust: 102%;
} | View examples |
| Override fallback line metrics | @font-face {
font-family: 'Atlas Fallback';
src: local('Arial');
ascent-override: 91%;
descent-override: 23%;
line-gap-override: 0%;
} | View examples |
| Align changing numbers | .data-table {
font-variant-numeric: tabular-nums lining-nums;
} | View examples |
| Control discretionary ligatures | .display {
font-variant-ligatures:
common-ligatures discretionary-ligatures;
} | View examples |
| Limit synthetic faces deliberately | .brand-wordmark { font-synthesis: none; } | View examples |
| Gate variable-font styling | @supports (font-variation-settings: normal) {
.expressive { font-variation-settings: 'GRAD' 80; };
} | View examples |