ADVERT

🎨 CSS Cheatsheet

Quick CSS reference for selectors, box model utilities, flexbox, grid, and responsive typography patterns.

Modern CSS snippets that cover selectors, layout primitives, and responsive typography. Ship resilient UI foundations without digging through docs.

Selectors

Target elements precisely with modern selectors.

Selector	Matches	Usage
`.card`	Class selector	Attach reusable styles to semantic classes.
`#hero`	ID selector	Use sparingly for unique anchors or JS hooks.
`button:hover`	Pseudo-class	Design interactive states (hover, focus-visible, active).
`nav a:nth-of-type(2)`	Nth-child family	Target patterned elements without extra markup.
`[data-theme="dark"]`	Attribute selector	Great for theming, feature flags, or QA hooks.

Control spacing, intrinsic sizing, and media fit.

Selector	Matches	Usage
`box-sizing: border-box;`	Sizing model	Include padding/borders within declared width/height.
`margin-inline / margin-block`	Logical properties	Respect writing modes and RTL layouts automatically.
`aspect-ratio: 16 / 9;`	Aspect ratio	Reserve responsive media slots without hacks.
`object-fit: cover;`	Media cropping	Fill containers without stretching images/videos.

Layout one-dimensional flows with ease.

display: flex; gap: 1rem; align-items: center;

display: flex;
gap: 1rem;
align-items: center;

flex-direction switches between rows and columns.

flex: 1; grows, flex: 0; stays true to content width.

Use gap for consistent spacing without collapsing margins.

Powerful two-dimensional layouts in a few lines.

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;

grid-template-areas with area assignments simplify layouts.

grid-template-areas: "nav nav" "sidebar main";

clamp() typography works beautifully with grid minmax().

font-size: clamp(1rem, 1.5vw, 1.25rem);

Use place-items or place-content to center both axes.

place-items: center;

Scale text and color systems intelligently.

Fluid typography
font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
Variable fonts
font-variation-settings: 'wght' 600;
System stack
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Color contrast
prefers-color-scheme queries plus custom properties keep palettes accessible.
Container queries
@container (inline-size > 600px) { ... } scales components instead of pages.

ADVERT

Anchors, character classes, quantifiers, flags, and real-world regex patterns you can paste into your next search.

Copy-ready Markdown syntax for headings, emphasis, lists, tables, code blocks, and media embeds.

Semantic HTML reference covering document structure, text elements, media, forms, and SEO-ready metadata.

Modern JavaScript reference packed with syntax basics, array helpers, async patterns, modules, and DOM tips.

SQL command reference for SELECT queries, filtering, joins, aggregation, schema changes, and performance tips.

ADVERT