Selectors and Declarations

Every stylesheet, from a ten-line hobby page to a design system with thousands of rules, is made of one repeated shape. Learn to see that shape and you can read any CSS file, find where a style comes from, and spot a broken rule at a glance.

The rule

The selector picks; the declarations decide.

A rule has two parts:

• The selector, .dish h3, chooses which elements the rule applies to: here, every h3 inside an element with class dish.
• The declaration block, everything between { and }, says what to do to them.

Inside the block sit declarations. Each declaration is one instruction with a fixed shape:

property : value ;

color: navy; is one declaration. font-size: 1.25rem; is another. The colon separates the property from its value; the semicolon ends the declaration so the next one can start. The semicolon after the last declaration is optional, but always writing it means you can add a line later without breaking anything.

Whitespace and line breaks are yours to choose. .dish h3{color:navy} is the same rule squeezed onto one line. Most people put one declaration per line for readability.

The shortcut

Read every rule as a sentence: "For every [selector], set [property] to [value], and [property] to [value]." If you cannot read it that way, a piece is missing.

The browser never shows an error for broken CSS. It skips what it cannot understand and carries on, so reading rules as sentences is your main line of defence.

Drills

Answer fast — trust the rule.

Remember

• A rule is a selector plus a declaration block of property: value; declarations.
• Read each rule as "for every X, set P to V".
• A missing semicolon can silently swallow the next declaration.