CSS units and colours
Absolute and relative units (px, em, rem, %, vw, vh) and colour notations (hexadecimal, rgb, hsl, transparency): knowing what each value refers to and converting it.
- 26 cards
- 5 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The numbers
- Scenarios
A few cards from the deck
rem: what is it?
Show the answer
A length unit equal to the font size of the html root element (16px by default in browsers).
Since every
remstarts from the same root, they do not compound:2remis always 32px by default, at any depth.What is this button's left padding, in px?
```css
button {
font-size: 20px;
padding: 0.5em 1em;
}`- 20 px
- 10 px
- 16 px
- 8 px
Show the answer
20 px
Outside
font-size,emrefers to the element's own font size, not the root's: 1em = 20px, not 16. The top and bottom padding, 0.5em, is 10px.In
#RRGGBB, each pair of digits runs from … to …, that is 0 to 255 in decimal.Show the answer
In
#RRGGBB, each pair of digits runs from 00 to FF, that is 0 to 255 in decimal.Two hexadecimal digits make 16 × 16 = 256 values, exactly one byte per channel.
em: what is it?
Show the answer
A length unit relative to font size: that of the element itself for most properties, that of its parent for font-size.
For
font-size,emvalues compound at every level:1.5eminside1.5emgives 2.25 times the starting size, which surprises people in nested lists.