First CSS: Text, Colours and Boxes

Six starter properties with example values: what each one changes, and the units the browser expects.

A CSS rule consists of a selector and a declaration block of property-value pairs, such as color: navy. The selector names what to style — a tag name, a class or an id — and the block lists the properties that change, each ending with a semicolon.

Color sets the text colour of the selected element; an example value is navy, and hex values such as #1a1a2e work the same way. Background-color sets the background behind the element and takes the same kinds of values.

Font-size sets the size of the text and needs a unit: 18px is valid, 18 alone is not, and the browser silently ignores a declaration whose value is missing its unit. This is the most common first-CSS failure.

Margin sets the space outside the element's border and padding sets the space inside it; both take pixel values such as 16px and 12px. The visual difference is easy to see: padding pushes content away from the border, margin pushes the border away from neighbours.

Max-width caps the line length, for example 720px, so that a wide window does not produce lines that are too long to read comfortably. It works together with margin: auto to centre a block on the page.

All six properties belong in the declaration block of one rule. Changing one value and reloading the browser is the fastest way to see what each property does; the table on the main page lists the six with example values side by side.

• color and background-color: text and background, no unit needed.
• font-size: needs px or another length unit.
• margin and padding: space outside and inside, in px.
• max-width: caps line length, in px.

Further reading

• The Ten Starter HTML Elements
• Build the Page, Step by Step