CSS Lab: HTML and CSS challenges with automatic checking
Stars
Tab indents. Press Esc, then Tab, to move focus out of the editor.
Preview
Yours
Target
Your HTML and CSS are shown in a sandboxed frame: scripts, event handlers and network requests are blocked.
Results
Press Check (Ctrl/Cmd + Enter) to test your solution. Every check is listed here with a plain reason when it fails.
Which selector wins? Specificity is a triple (ids, classes/attributes/pseudo-classes, elements/pseudo-elements). Compare left to right.
WCAG contrast between text and its background. Type any hex, rgb(), hsl() or a common colour name.
Text colour
Background colour
The box model: content, then padding, border and margin around it. Move the sliders and switch box-sizing to see the total space an element takes.