A CSS rule

A rule is a selector, then braces holding property: value pairs. Rules that match the same element all apply; they add up rather than replace each other.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Every stylesheet is a list of these. Reading one as 'which elements, then what changes' is the whole grammar.

How to think about it

Selector first: who does this touch? Then each declaration: what changes, to what. End every declaration with a semicolon so the next one is not swallowed.

Worked example

<p class="note">Careful.</p>

Something to style: a paragraph with a class.

p { color: rgb(200, 0, 0); }

Selector p, one declaration: every paragraph's text goes red.

.note { font-weight: bold; }

A second rule matches the same paragraph; both apply. It is red and bold.

Your turn

Make every heading green.

h1 { : green; }

The trap

A missing semicolon between declarations. The browser reads the next property as part of the previous value and drops both, without an error.

Practise a CSS rule on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.