CSS Playground🎯 Selectors / Element & Universal

CSS selectors choose which HTML elements to style. The element selector targets all elements of a given type — write the tag name without angle brackets.

The universal selector * matches every element on the page. It is most commonly used in a CSS reset to strip default browser margin and padding.

CSS
HTML
Preview
1 / 53

Related Tools

See all ->
UI Snippets LibraryCopy-paste HTML, CSS & JS componentsSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorHTML Playground42 lessons · Click-based · Live previewCSS Grid BuilderVisual grid layout editorFlexbox BuilderVisual layout editorCSS Animation GeneratorKeyframe animation builderCSS Minifier / BeautifierMinify & format CSS

Interactive CSS Playground — Learn CSS Visually with a Live Editor

53 lessons across 18 chapters. Edit CSS and HTML, see results instantly. Free, no sign-up.

Updated May 17, 2026
Share & Support

What's included

Features

53 lessons across 18 chapters — selectors, colours, typography, box model, display, flexbox, grid, animations, CSS variables, pseudo-elements, responsive design, modern selectors, modern layout, cascade layers, visual effects, modern color, clip-path, and masks
Split-pane editor: CSS and HTML editors visible simultaneously with a draggable resize divider
Live sandboxed preview that updates as you type
Remove CSS / Apply CSS toggle — instantly see the page without any styles applied
Responsive preview sizes — 375px mobile, 768px tablet, full width
CSS error detection — inline warning for unclosed braces and syntax mistakes
Format CSS button auto-indents and prettifies the editor content
Quick Check challenges with persistent completion saved to localStorage
Copy CSS and Copy HTML buttons — grab just the code you need in one click
Progress and position saved locally — no account required

About this tool

Most people struggle with CSS because they read about properties without seeing what they actually do. The CSS Playground flips that — you edit CSS in a live editor, the preview updates instantly, and you build a genuine understanding by doing rather than memorising.

The tool has 53 lessons across 18 chapters covering everything from basic selectors to modern production CSS: container queries, subgrid, CSS nesting, cascade layers, logical properties, blend modes, filters, scroll-driven animations, @property, clamp(), color-mix(), OKLCH, relative color syntax, clip-path, and mask-image. Each lesson provides a base HTML structure and starter CSS in a live split-pane editor — CSS on top, HTML below, preview on the right.

As you type, the preview updates in real time. The "Remove CSS" toggle strips all styles so you can see exactly what your CSS contributes. Responsive preview buttons (375px mobile, 768px tablet, full width) let you check how your layout responds at different widths. Quick Check challenges after key lessons reinforce learning through active recall. All progress is saved locally — no account required.

If you are a freelance designer or developer building your CSS skills, also check out the Freelance Rate Calculator to price your services correctly and the Freelance Invoice Generator to handle your billing — both run entirely in your browser.

Step by step

How to Use

  1. 1
    Pick a lessonBrowse the 18 chapters in the left sidebar. Click any lesson to load its HTML and CSS into the editors. Use the search box to filter lessons by name.
  2. 2
    Read the conceptThe collapsible panel above the editors explains what the lesson covers and why it matters — including the mental model behind the CSS property or technique.
  3. 3
    Edit CSS and HTMLThe CSS editor (top) and HTML editor (bottom) are both visible at once. Edit either and watch the preview update instantly. Drag the divider between them to resize.
  4. 4
    Use the toolbar buttonsFormat cleans up messy CSS. Remove CSS strips all styles so you can see the unstyled HTML. The responsive size buttons (375 / 768 / Full) resize the preview to check your layout.
  5. 5
    Answer the Quick CheckSome lessons end with a multiple-choice challenge. Your answers are saved — revisiting the lesson shows "✓ Challenge complete" if you already answered correctly.
  6. 6
    Move to the next lessonUse the Prev / Next buttons or click any lesson in the sidebar. Progress is saved to localStorage automatically.

Real-world uses

Common Use Cases

Beginners Learning CSS for the First Time
If you have never written CSS before, this playground removes every barrier. Each lesson explains one concept in plain English, gives you working code to edit immediately, and shows the result in a live preview. No setup, no terminal, no memorising property names — just open a lesson and start changing things.
Developers Who Struggle with Flexbox and Grid
Flexbox and CSS Grid are the most commonly misunderstood parts of CSS. The playground dedicates seven lessons to layout — flex container, direction, wrapping, justify-content, align-items, grid columns, grid areas, and auto-placement. Edit the values and watch the layout shift in real time until the mental model clicks.
Students Following a Web Dev Curriculum
If you are working through a bootcamp or university course, the CSS Playground gives you a hands-on environment to experiment with exactly what you are studying. Load the lesson that matches your module, edit the CSS, break it, fix it, and build the intuition that reading slides alone cannot give you.
Self-Taught Developers Filling CSS Gaps
Many self-taught developers know enough CSS to get by but have gaps — they skip pseudo-elements, avoid CSS variables, or hardcode breakpoints instead of using clamp(). The modern chapters target exactly these gaps with focused, editable lessons covering variables, pseudo-elements, responsive design, modern selectors, layout, cascade layers, visual effects, and modern color.
Anyone Prototyping CSS Effects
Need to quickly test a keyframe animation, a box-shadow stack, or a gradient before applying it to a real project? Load the relevant lesson, modify the values, and use the Copy CSS or Download buttons to take the working code straight into your project. Faster than a blank CodePen.
Teachers Demonstrating CSS in the Classroom
The split-pane layout works perfectly on a projected screen — the CSS editor on the left, the live result on the right. Load a lesson, edit a property live, and the class watches the layout respond instantly. The Remove CSS toggle is especially effective for showing students exactly what each CSS rule contributes.

Got questions?

Frequently Asked Questions

No prior experience is needed. The playground starts with the basics — what CSS selectors are, how to target elements, and what properties do. Each lesson provides working HTML + CSS code you can immediately edit and experiment with. The concept explanation above the editor explains the why, and the live preview shows the result instantly.

The playground covers 53 lessons across 18 chapters: Selectors, Colors, Typography, Box Model, Layout Basics, Flexbox, CSS Grid, Animations, CSS Variables, Pseudo-elements, Responsive Design, Modern Selectors, Modern Layout, Cascade & Layers, Visual Effects, Advanced Variables, Modern Color, and Clip & Mask.

Yes. The editor pane shows CSS and HTML editors stacked vertically — both visible at once. A draggable divider between them lets you adjust how much space each gets. Both editors update the live preview as you type. The Reset button restores the lesson's default code at any time.

Yes. Both your completed lessons and your current lesson position are saved to localStorage in your browser. When you return, the playground resumes where you left off with all completed lessons still marked. No account or login is required.

The preview is a sandboxed iframe that renders your HTML and CSS directly in the browser. As you type in the CSS or HTML editor, the preview updates after a short debounce (about 150ms). This means you see the effect of your changes almost instantly without any page reload or build step.

Some lessons include a Quick Check — a multiple-choice question about the concept you just learned. Click the answer you think is correct. Green means right; red shows the correct answer if you were wrong. These use active recall, one of the most effective learning techniques, to help cement what you've read.

Yes. Click the download (.html) button in the preview header to save the current HTML + CSS as a complete, self-contained HTML file you can open in any browser or deploy directly.

Yes — both are covered in depth. Flexbox spans 4 lessons: understanding the flex container, flex-direction and flex-wrap, justify-content and align-items, and controlling individual flex items with flex-grow, flex-shrink, and flex-basis. CSS Grid spans 3 lessons: the grid container and fr unit, grid-template-areas for named layouts, and column spanning with auto-placement using minmax() and auto-fill.