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.

Next in HTML and CSS

Every HTML and CSS lesson on one page

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.