Relative units in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font size to 2 times the root element's font size.

CSS

p { font-size: 2[1]; }

Drag options to blanks, or click blank then click option'

Arem

Bpx

Cem

D%

Attempts:

3 left

💡 Hint

Common Mistakes

Using px which is absolute, not relative.

Confusing em with rem.

The rem unit means "root em" and scales relative to the root font size.

2fill in blank

medium

Complete the code to set the margin to 5% of the parent element's width.

CSS

div { margin: [1]; }

Drag options to blanks, or click blank then click option'

A5px

B5rem

C5%

D5em

Attempts:

3 left

💡 Hint

Common Mistakes

Using px which is fixed size.

Using rem which relates to root font size, not parent width.

The % unit sets size relative to the parent element's width for margin.

3fill in blank

hard

Fix the error in the code to set padding relative to the current element's font size.

CSS

section { padding: 1[1]; }

Drag options to blanks, or click blank then click option'

Apx

Bem

Crem

D%

Attempts:

3 left

💡 Hint

Common Mistakes

Using px which is fixed size.

Using rem which relates to root, not current element.

The em unit scales relative to the current element's font size, perfect for padding.

4fill in blank

hard

Fill both blanks to set the width to 50% of the viewport width and height to 10% of the viewport height.

CSS

div { width: 50[1]; height: 10[2]; }

Drag options to blanks, or click blank then click option'

Avw

Bvh

C%

Dem

Attempts:

3 left

💡 Hint

Common Mistakes

Using % which relates to parent, not viewport.

Using em which relates to font size.

vw means viewport width and vh means viewport height, both relative to the browser window size.

5fill in blank

hard

Fill all three blanks to create a responsive font size: 1.5 times the root font size, with a margin of 2% and padding of 1em.

CSS

p { font-size: 1.5[1]; margin: 2[2]; padding: 1[3]; }

Drag options to blanks, or click blank then click option'

Arem

B%

Cem

Dpx

Attempts:

3 left

💡 Hint

Common Mistakes

Using px for font size or margin which is not responsive.

Confusing em and rem units.

This sets font size relative to root (rem), margin as a percent of parent width (%), and padding relative to current font size (em).