syntax · selector · declaration · property · value
StylaVSThe Specificity Sphinx
Styla saysA CSS rule is a selector plus a block of property:value declarations.
Every rule has the same shape: a selector (what to style) followed by a declaration block in braces. Inside, each declaration is a property: value; pair. h1 { color: red; font-size: 24px; } selects all h1s and sets two properties. Master this anatomy and the whole language opens up.
Power-ups you unlock
selector { property: value; }
Multiple declarations separated by semicolons
Whitespace is ignored — format for readability
The same property can be set many times (last wins)
The Specificity Sphinx attacks — common mistakes
Forgetting the semicolon between declarations
Missing units on lengths (24 instead of 24px)
Typos in property names fail silently
Boss battleWrite one rule that sets three properties on <p>: color, font-size, and line-height.