Practice CSS right here — no installs, no signups.
CSS decides how a page looks: colour, spacing, typography, layout and motion. This online CSS playground pairs your stylesheet with sample markup and renders the result instantly, which makes it the quickest way to build intuition for the box model, Flexbox and Grid.
Work through the fundamentals in order — selectors and specificity, the box model, then Flexbox for one-dimensional layout and Grid for two dimensions — before touching animations. Most layout confusion is really a box-model or specificity misunderstanding.
Copy any snippet into the editor above and press Run. Each one is short on purpose — retype it from memory afterwards.
.card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
border-radius: 12px;
}justify-content works along the main axis, align-items across it. Swap flex-direction and the two roles swap with it.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}auto-fit with minmax gives a responsive card grid with no media queries at all.
My rule is ignored
Why: A more specific selector wins, or the property is misspelled.
Fix: Raise specificity (or reorder the rules) and check the spelling — invalid properties are silently dropped.
Margins collapse unexpectedly
Why: Adjacent vertical margins merge into the larger one.
Fix: Use padding on the parent, or make the parent a flex container.
The element ignores width
Why: It is an inline element.
Fix: Set display: block or inline-block before applying width.
| Concept | Syntax |
|---|---|
| Class selector | .card { } |
| Flex row | display: flex; gap: 8px; |
| Grid | grid-template-columns: 1fr 1fr; |
| Border box | box-sizing: border-box; |
| Media query | @media (max-width: 768px) { } |
| Transition | transition: all .3s ease; |
Yes — the preview pairs your stylesheet with sample HTML and re-renders on every run.
Yes. Declare them on :root and reference them with var(--name).
Running snippets builds speed; the 17-chapter course builds understanding. Work through the CSS chapters, take the quiz, then claim your certificate.
Other compilers: JavaScript compiler, TypeScript compiler, Python 3 compiler, Java compiler, C compiler, C++ compiler, Go compiler, Rust compiler, HTML compiler, SQLite compiler
These steps cover the CSS that does the real work: selectors and the cascade, the box model, Flexbox, Grid, and responsive design with media queries and custom properties.
Element, class and id selectors have increasing specificity, and later rules win ties. Prefer classes: they keep specificity flat and predictable.
p { color: #444; }
.lead { color: #111; font-size: 1.125rem; }
#hero .lead { font-weight: 700; }Every element is content, padding, border and margin. box-sizing: border-box makes width include padding and border, which is why nearly every project sets it globally.
*, *::before, *::after { box-sizing: border-box; }
.card { width: 300px; padding: 16px; border: 1px solid #ddd; }Flex arranges children along one axis. justify-content controls the main axis, align-items the cross axis, and gap replaces margin hacks.
.row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}Grid places items in rows and columns at once. auto-fit with minmax gives you a responsive card grid without a single media query.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}Variables declared on :root are readable everywhere, and a min-width media query layers desktop rules on top of a mobile-first base.
:root { --brand: #6d28d9; --pad: 16px; }
.btn { background: var(--brand); padding: var(--pad); }
@media (min-width: 768px) {
.btn { padding: 20px 28px; }
}Try each one in the editor above before opening the solution — the struggle is where the learning happens.
Hint: A flex container with min-height: 100vh.
.wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}Hint: auto-fit and minmax do this without a media query.
.grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}Hint: Override the custom properties inside prefers-color-scheme: dark.
:root { --bg: #fff; --fg: #111; }
@media (prefers-color-scheme: dark) {
:root { --bg: #0b0b12; --fg: #f5f5f5; }
}
body { background: var(--bg); color: var(--fg); }CSS controls everything a visitor actually sees, and layout skills transfer directly to every framework and design system.
Modern CSS handles responsive layout, theming and animation natively, so a lot of what once needed JavaScript is now a few declarations.
Ready for structured practice? The 17-chapter CSS course takes these ideas one at a time, with a quiz and a certificate at the end.