← HTML & CSS

CSS units

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.

Part of: HTML and CSS Journey — Module 42

Understanding CSS units in HTML & CSS

What it does: If the paragraph's font size is 16px, padding: 1.5em = 24px. If the font size changes, the padding scales too. 2px is always 2 pixels. Unlike em or rem, px does not scale with the font size or viewport size. em multiplies by the current font size. 2em on 20px = 2 × 20px = 40px. It is relative to the element's own font size. vh (viewport height) is relative to the browser window. 100vh = the full visible height of the viewport. There must be no space between the number and its unit: 16px is valid, 16 px is invalid.

Common mistakes: A number without a unit is invalid CSS (except for 0). It should be font-size: 16px; with the px unit. There must be no space between the number and the unit. It should be font-size: 2em; not font-size: 2 em;.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add CSS units to a class →

This module's key terms are also in a printable crossword (Modules 43–52) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which CSS unit is absolute (does not scale with context)?

pxrem

Matches

p { font-size: 16; }

↓

A number without a unit is invalid CSS — write font-size: 16px; (zero is the only exception)

Applying

Meanings

Term

rem

Meaning

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.

Practice

html { font-size: 16px; }

Testing

Gaps

p { font-size: 16; }

Check Answer

Spots

1p { font-size: 16; }

2h1 { font-size: 2em; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which CSS unit is absolute (does not scale with context)?

A. rem

B. px ✓

px (pixels) is an absolute unit — 16px is always 16 pixels regardless of context. rem scales relative to the root font size.

2. What is 2em on an element with a font size of 20px?

A. 32px

B. 40px ✓

em multiplies by the current font size. 2em on 20px = 2 × 20px = 40px. It is relative to the element's own font size.

3. True or false: rem is affected by the parent element's font size.

A. False ✓

B. True

rem is relative only to the root element's font size (html). It is not affected by nesting — that is rem's advantage over em.

4. What does 100vh represent?

A. 100% of the viewport height ✓

B. 100 pixels

vh (viewport height) is relative to the browser window. 100vh = the full visible height of the viewport.

5. True or false: CSS unit abbreviations must be attached to the number with no space.

A. True ✓

B. False

There must be no space between the number and its unit: 16px is valid, 16 px is invalid.

Match the Pairs

h1 { font-size: 2rem; } → Sets the heading to twice the root font size — if html is 16px, this equals 32px regardless of nesting

section { height: 100vh; } → Sets the section to the full height of the browser viewport — useful for full-screen sections

em multiplies the current element's font size — 1.5em on a 20px element = 30px → p { padding: 1.5em; }

px is an absolute unit — the size is fixed regardless of the user's settings or parent element → div { border-width: 2px; }

p { font-size: 16; } → A number without a unit is invalid CSS — write font-size: 16px; (zero is the only exception)

h1 { font-size: 2 rem; } → There must be no space between the number and its unit — write font-size: 2rem; not 2 rem;

Key Term

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.

Fill in the Blanks

1. p { font-size: 16px; }

Hint: Type the absolute CSS unit that represents pixels

2. p { font-size: 1.5em; }

Hint: Type the relative CSS unit that scales relative to the current element's font size

3. h1 { font-size: 2rem; }

Hint: Type the relative CSS unit that scales relative to the root element's font size

4. div { width: 50vw; }

Hint: Type the CSS unit that represents a percentage of the viewport width

5. section { height: 100vh; }

Hint: Type the CSS unit that represents a percentage of the viewport height

Spot the Error

Question 1

A p { font-size: 16; }

B h1 { font-size: 2em; }

C div { width: 100%; }

Line A — A number without a unit is invalid CSS (except for 0). It should be font-size: 16px; with the px unit.

Question 2

A p { font-size: 1em; }

B h1 { font-size: 2 em; }

C div { padding: 10px; }

Line B — There must be no space between the number and the unit. It should be font-size: 2em; not font-size: 2 em;

Question 3

A p { width: 50%; }

B div { height: 200px; }

C a { font-size: 1,5rem; }

Line C — Decimal numbers in CSS use a dot, not a comma. It should be font-size: 1.5rem; not 1,5rem;

Question 4

A p { margin: 10px; }

B div { width: 80%; }

C h1 { font-size: 2em; }

D span { width: 50vw }

Line D — The declaration is missing its closing semicolon. It should be width: 50vw; with a semicolon.

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; }

Line E — There must be no space between the number and the unit. It should be font-size: 12px; not 12 px;

Student with a class code? Join your class →