CSS Playground
Learn CSS by Playing
Drag sliders, pick options, and watch CSS happen in real time. When you're happy, click Copy CSS.
New to CSS? Read the visual lesson →Four CSS pages — which one do you need?
They each do a different job. Here's where you are, and where to go next.
The big picture — how styles attach to HTML, the cascade, specificity, inheritance, the box model. Start here to understand why CSS behaves as it does.
CSS SelectorsEvery way to point at elements — class, id, combinators, pseudo-classes. Use when your style isn't hitting the right element.
CSS RecipesGoal-first answers — full-width hero, background, fonts, centering. Use when you know the look you want but not the property.
Detailed CSSA hands-on reference of the actual properties and values — color, font, spacing, borders, backgrounds. Use when you want full detail on a property.
Box Model
Control margin, border, padding, and content size. Watch the total space change.
Flexbox
Pick flex properties from dropdowns and see how items arrange themselves.
CSS Grid
Set columns, rows, and gap — watch the grid form. No code required.
CSS Positioning
Switch between position values and drag top/left sliders to see how each one behaves.
relative: Element stays in normal flow but can be nudged with top/left. Other elements don't move.
Typography & Colors
Experiment with fonts, sizes, spacing, and colors. See how typography changes the feel.
The Quick Brown Fox
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Good typography makes content easy to consume and gives your website a professional feel.