Colours
This rule styles the page's heading, h1. Its values come in two kinds: colours (color, background) and lengths with a unit (font-size, padding, width). The browser turns every one into something it can draw: light levels, or pixels.
A screen mixes every colour from red, green and blue light. So a CSS colour comes down to three numbers, one per light, from 0 (off) to 255 (full). This one is 255 red, 99 green, 71 blue.
#ff6347 writes those three numbers in hexadecimal (base 16), where a to f mean 10 to 15. Each pair of digits is one light: ff = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99, 47 = 4×16 + 7 = 71.
The same colour can also be written by name, tomato, or with the rgb() function, rgb(255 99 71). All three spellings give the browser the same three numbers, so the heading does not change at all.
background: lavender; paints the heading's box. lavender is one of the colour names CSS defines: 230 red, 230 green, 250 blue. A heading is a block, so its box runs the full width of the page.
Lengths and units
Lengths need a unit. px is a CSS pixel. rem means a multiple of the root font size, the size of the page's html element: 16px by default. So 3rem is 3 × 16 = 48px, and the heading grows.
em means a multiple of the element's own font size. The heading's font size is now 48px, so padding: 0.5em is 0.5 × 48 = 24px of space inside the box, on every side.
A percentage is a part of something else. For width, it is the parent's width. The body is 480px wide minus an 8px margin each side: 464px. So width: 50% is 232px.
Change the base
Relative units follow their base. If a reader sets a bigger default text size, say 20px, 3rem becomes 60px and 0.5em follows to 30px. The width stays 232px: it depends on the parent, not on text size.
What happens
;; step 1/9 · two-kinds
style.css
h1 {
color: #ff6347;
background: lavender;
font-size: 3rem;
padding: 0.5em;
width: 50%;
}
colours color, background
lengths font-size, padding, width
the browser's starting values for h1:
color 0 0 0 (black), font-size 2em = 32px, width auto
A real browser works out all of a rule's values at once, while it styles the page. The figure does them one at a time, in card order, so you can see what each one depends on. CSS names several stages of a value. A colour or an em length is turned into a fixed value early (the computed value); a percentage width stays a percentage until layout, when the browser knows the parent's width (the used value). The figure shows the final numbers the browser draws with.