ADVERT
🎨 CSS Cheatsheet
Quick CSS reference for selectors, box model utilities, flexbox, grid, and responsive typography patterns.
Modern CSS quick reference with instant search, one-click copy, and a live sandbox to test snippets.
Selectors
Target DOM nodes precisely.
| Snippet | Concept | Usage | Actions |
|---|---|---|---|
.card { border-radius: 12px; padding: 1rem; } | Class selector | Reusable styling hook | |
button:hover { transform: translateY(-1px); } | Pseudo-class | Interaction states | |
[data-theme="dark"] { color: #f7f7f7; } | Attribute selector | Theme or state targeting |
Layout
Compose resilient flex and grid systems.
| Snippet | Concept | Usage | Actions |
|---|---|---|---|
display: flex; gap: 1rem; align-items: center; | Flex container | One-dimensional alignment | |
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem; | Grid container | Two-dimensional layout | |
aspect-ratio: 16 / 9; | Intrinsic sizing | Reserve media slots |
Typography and Responsiveness
Scale text and spacing across breakpoints.
| Snippet | Concept | Usage | Actions |
|---|---|---|---|
font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem); | Fluid type | Responsive text sizing | |
@container (inline-size > 600px) { .card { grid-template-columns: 1fr 1fr; } } | Container query | Component-level responsiveness | |
@media (prefers-color-scheme: dark) { :root { --bg: #101113; --fg: #f4f5f8; } } | Media query | Respect user theme preference |
CSS Playground
Experiment with HTML + CSS and preview in a sandboxed frame.
ADVERT
ADVERT