ADVERT

CSS Cheatsheet

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

Reference index

Search selectors and snippets

Target DOM nodes precisely.

Snippet	Concept	Usage
`.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

Compose resilient flex and grid systems.

Snippet	Concept	Usage
`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

Scale text and spacing across breakpoints.

Snippet	Concept	Usage
`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

Experiment with HTML and CSS in a sandboxed frame.

HTMLCSS

Sandboxed output

Search the reference table to find selectors, layout patterns, and responsive snippets.
Copy a snippet directly or load it into the playground with the Test action.
Adjust HTML and CSS in the editor panes and preview behavior in the sandboxed frame.

Includes selector syntax, layout primitives, and responsive typography techniques.
Rows are organized by concept so snippets can be applied quickly in production code.
One-click actions reduce context switching during implementation and review.

Use the sandbox to validate snippet behavior before applying changes to your codebase.
Test action seeds the CSS editor with the selected row snippet for rapid iteration.
Edit both HTML and CSS side by side to reproduce layout and style edge cases.

Does the CSS playground run client-side?: Yes. Preview rendering is local in a sandboxed iframe and does not require server processing.
Can I test my own HTML with the snippets?: Yes. Replace the sample HTML in the editor pane and iterate with your own markup.
Is this a complete CSS specification?: No. It is a practical, high-signal cheatsheet focused on common production patterns.

ADVERT