Colours and units
CSS values come in kinds. A colour, however you spell it (#ff6347, tomato or rgb(255 99 71)), becomes three light levels from 0 to 255. A length becomes CSS pixels: rem from the root font size, em from the element's own font size, and % from the parent's width. Watch one rule's values travel to the browser, take their base along, and change the page; then grow the root font size and see which values follow.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What does #00ff00 mean?
Each pair is one light: 00 = 0 red, ff = 255 green, 00 = 0 blue. Only the green light is on, at full strength.
02Which of these is NOT the same colour as #ff6347?
63 and 47 are hex. In everyday numbers they are 99 and 71, so rgb(255 63 47) is a different colour. Hex digits are not case-sensitive, so #FF6347 is the same.
03The root font size is 16px. What is 2.5rem in px?
rem is a multiple of the root font size: 2.5 × 16 = 40px.
04An element has font-size: 20px and padding: 2em. How much padding does it get?
Outside font-size itself, em is a multiple of the element's own font size: 2 × 20 = 40px.
05A reader sets a bigger default text size. Which value does NOT change?
rem and em are worked out from font sizes, so they follow the reader's setting. A percentage width is part of the parent's width, which does not depend on text size here.
Glossary
- RGB
- Red, green and blue: the three lights a screen mixes. A CSS colour gives each one a level from 0 (off) to 255 (full).
- Hex colour
- A colour written as # and three pairs of hexadecimal (base 16) digits, one pair per light, such as #ff6347.
- Named colour
- A colour word CSS defines, such as tomato or lavender. Each name stands for one exact RGB value.
- CSS pixel (px)
- CSS's basic length unit, 1/96 of a CSS inch. On a sharp screen one CSS pixel covers several device pixels.
- rem
- A multiple of the root element's (html's) font size, usually 16px. 3rem = 48px.
- em
- A multiple of the element's own font size (or, inside font-size itself, the parent's font size).
- Percentage
- A part of some other value; for width, a part of the parent's (containing block's) width.
- Relative unit
- A unit worked out from a base, such as rem, em or %. Change the base and the result changes.
Notes and sources
- 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.
- One exception: inside font-size itself, em means the parent's font size (an element cannot be a multiple of its own size). rem avoids the question: it always means the root element's font size.
- A CSS pixel is 1/96 of a CSS inch. On screens it is tied to a reference pixel (roughly one pixel of a 96 dpi screen seen at arm's length), so on a high-density screen one CSS pixel covers several device pixels.
- background is a shorthand that can set several background properties at once; with just a colour it sets background-color.
- width sets the content width (box-sizing: content-box, the default); the padding is added outside it, so the drawn box is 232 + 2 × 24 = 280px wide.
Quiz Unlocks after the last step.