CSS Playground Part 1
Every CSS Property, Visual
30 interactive labs. Drag sliders, pick options, watch CSS happen. Copy the code when you're ready.
CSS Syntax
Learn the anatomy of a CSS rule — every part has a name. Hover the labels to highlight each piece.
■ Property — WHICH style to change
■ Value — HOW to style it
■ Punctuation — { } : ;
■ Declaration — property + value pair
A CSS rule = a selector + a declaration block (everything inside the curly braces). Each declaration is one property: value; pair.
CSS Selectors
Selectors tell CSS WHICH elements to style. Pick a selector to see exactly what it targets, why, and when to use it.
Element Selector
CSS Colors
Colors can be set as names, hex codes, RGB, or HSL. See all formats for the same color.
CSS Backgrounds
Background color, gradients, size, repeat, and position.
CSS Borders
Width, style, color, and radius — all on one box.
CSS Margins
Space OUTSIDE an element. Pushes other elements away. The orange area shows the margin.
CSS Padding
Space INSIDE an element. Background color extends into padding. The green area shows padding.
CSS Height & Width
Set exact dimensions in px, %, or auto.
CSS Box Model
Margin + Border + Padding + Content = the full box. Toggle box-sizing to see the difference.
Total: 246 × 146px
CSS Outline
Outline is like border but doesn't take up space and can be offset.
CSS Text
Alignment, decoration, transform, spacing, shadow.
CSS Fonts
Family, size, weight, and style.
CSS Links
Links have 4 states: link, visited, hover, active. Style each one.
a:link — unvisited link
a:visited — already clicked
a:hover — mouse is over it
a:active — being clicked right now
CSS Lists
Bullet style, position, and custom list styling.
- First list item
- Second list item
- Third list item
- Fourth list item
CSS Tables
Border collapse, striped rows, hover effects.
| Name | Role | Score |
|---|---|---|
| Alex | Developer | 95 |
| Jamie | Designer | 88 |
| Sam | Manager | 92 |
| Taylor | Analyst | 97 |
CSS Display
Block, inline, inline-block, none, flex, grid — how elements flow on the page.
block: Takes full width. Stacks vertically. Height/width work. (div, p, h1)
CSS Max-width
max-width limits how wide an element can get. Essential for responsive design.
CSS Position
static, relative, absolute, fixed, sticky — how elements are placed on the page.
static: Default. Normal flow. top/left have NO effect.
CSS Z-index
z-index controls stacking order. Higher number = on top. Only works on positioned elements.
CSS Overflow
What happens when content is bigger than its container?
CSS Float
Float pushes an element to the left or right, and text wraps around it.
CSS Inline-block
inline-block flows like text but respects width/height. Compare all three display types.
CSS Align
Center text, center a block, center vertically — the most common alignment patterns.
CSS Rounded Corners
border-radius rounds corners. Use one value for all, or control each corner independently.
CSS Gradients
Linear, radial, conic — smooth transitions between colors.
CSS Shadows
box-shadow adds shadow to elements, text-shadow adds shadow to text.
CSS Text Effects
Gradient text, text-overflow, text-stroke, word-break, and writing-mode.
CSS Tooltips
Tooltips appear on hover — built with pure CSS using ::after and :hover.
CSS Opacity
opacity makes the entire element transparent. Compare with rgba() which only affects color.
opacity affects the ENTIRE element — background, text, borders, children. Everything fades.
rgba() only affects the specific property it's applied to. Text can stay opaque while background fades.
opacity (entire element)
rgba (background only)
CSS Buttons
Build any button style — solid, gradient, outline, ghost. Add hover effects.