What does CSS Battle score?

How close your result is to the target, and how little CSS you used. Matching the picture is the goal. The shorter stylesheet is the extra constraint.

CSS Studio

Interactive Learning

On this tool

Absolute positioning every shape will match the target and teach you nothing about layout. Try flex or grid first if the puzzle is a row or a stack.

CSS Battle Arena

Match the target. Shorter CSS scores better, but a correct shape matters more than a clever one-liner you cannot read.

What people get wrong

Absolute positioning every shape will match the target and teach you nothing about layout. Try flex or grid first if the puzzle is a row or a stack.

What does CSS Battle score?: How close your result is to the target, and how little CSS you used. Matching the picture is the goal. The shorter stylesheet is the extra constraint.

Challenges

Compare

Target

Your Output