CSS units
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which CSS unit is absolute (does not scale with context)?
2. What is 2em on an element with a font size of 20px?
3. True or false: rem is affected by the parent element's font size.
4. What does 100vh represent?
5. True or false: CSS unit abbreviations must be attached to the number with no space.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1h1 { font-size: 2rem; } | Adiv { border-width: 2px; } | |
| 2section { height: 100vh; } | BSets the section to the full height of the browser viewport — useful for full-screen sections | |
| 3em multiplies the current element's font size — 1.5em on a 20px element = 30px | Cp { padding: 1.5em; } | |
| 4px is an absolute unit — the size is fixed regardless of the user's settings or parent element | DA number without a unit is invalid CSS — write font-size: 16px; (zero is the only exception) | |
| 5p { font-size: 16; } | ESets the heading to twice the root font size — if html is 16px, this equals 32px regardless of nesting | |
| 6h1 { font-size: 2 rem; } | FThere must be no space between the number and its unit — write font-size: 2rem; not 2 rem; |
C
Definitions
rem
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
p { font-size: 16__; }
2.
p { font-size: 1.5__; }
3.
h1 { font-size: 2___; }
4.
div { width: 50__; }
5.
section { height: 100__; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
p { font-size: 16; }
B
h1 { font-size: 2em; }
C
div { width: 100%; }
Question 2
A
p { font-size: 1em; }
B
h1 { font-size: 2 em; }
C
div { padding: 10px; }
Question 3
A
p { width: 50%; }
B
div { height: 200px; }
C
a { font-size: 1,5rem; }
Question 4
A
p { margin: 10px; }
B
div { width: 80%; }
C
h1 { font-size: 2em; }
D
span { width: 50vw }
Question 5
A
body { font-size: 16px; }
B
p { font-size: 1em; }
C
h2 { font-size: 1.5rem; }
D
div { padding: 10px; }
E
a { font-size: 12 px; }
Answer Key
CSS units
Section A: Quick Questions
Q1
B — px
Q2
B — 40px
Q3
A — False
Q4
A — 100% of the viewport height
Q5
A — True
Section B: Match the Pairs
Q1
h1 { font-size: 2rem; } → Sets the heading to twice the root font size — if html is 16px, this equals 32px regardless of nesting
Q2
section { height: 100vh; } → Sets the section to the full height of the browser viewport — useful for full-screen sections
Q3
em multiplies the current element's font size — 1.5em on a 20px element = 30px → p { padding: 1.5em; }
Q4
px is an absolute unit — the size is fixed regardless of the user's settings or parent element → div { border-width: 2px; }
Q5
p { font-size: 16; } → A number without a unit is invalid CSS — write font-size: 16px; (zero is the only exception)
Q6
h1 { font-size: 2 rem; } → There must be no space between the number and its unit — write font-size: 2rem; not 2 rem;
Section C: Definitions
Q1
rem — A CSS relative unit. 1rem equals the root element's (html) font size. Unlike em, rem is not affected by nesting — it is consistent throughout the page.Section D: Fill in the Blanks
Q1
p { font-size: 16px; }Q2
p { font-size: 1.5em; }Q3
h1 { font-size: 2rem; }Q4
div { width: 50vw; }Q5
section { height: 100vh; }Section E: Spot the Error
Q1
A — A number without a unit is invalid CSS (except for 0). It should be font-size: 16px; with the px unit.
Q2
B — There must be no space between the number and the unit. It should be font-size: 2em; not font-size: 2 em;
Q3
C — Decimal numbers in CSS use a dot, not a comma. It should be font-size: 1.5rem; not 1,5rem;
Q4
D — The declaration is missing its closing semicolon. It should be width: 50vw; with a semicolon.
Q5
E — There must be no space between the number and the unit. It should be font-size: 12px; not 12 px;