0
0
CSSmarkup~20 mins

Relative units in CSS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Relative Units Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
Understanding rem vs em units
Which statement correctly describes the difference between rem and em units in CSS?
A<code>rem</code> is relative to the root element's font size, while <code>em</code> is relative to the font size of the current element.
B<code>rem</code> and <code>em</code> are both relative to the viewport width.
C<code>rem</code> is relative to the parent element's font size, while <code>em</code> is relative to the root element's font size.
D<code>rem</code> is an absolute unit, while <code>em</code> is relative to the current element's height.
Attempts:
2 left
💡 Hint
Think about which element's font size each unit depends on.
📝 Syntax
intermediate
2:00remaining
CSS code output with relative units
Given the CSS below, what will be the computed font size of the <p> inside .container if the root font size is 16px?
CSS
html { font-size: 16px; }
.container { font-size: 1.5rem; }
.container p { font-size: 2em; }
A24px
B48px
C32px
D16px
Attempts:
2 left
💡 Hint
Calculate step by step: root font size → container font size → p font size.
❓ selector
advanced
1:30remaining
Which CSS rule sets padding using viewport width?
Which CSS rule correctly sets the padding of a div to 5% of the viewport width?
Adiv { padding: 5vw; }
Bdiv { padding: 5vh; }
Cdiv { padding: 5rem; }
Ddiv { padding: 5em; }
Attempts:
2 left
💡 Hint
vw stands for viewport width, vh for viewport height.
❓ layout
advanced
2:00remaining
Responsive layout with relative units
You want a container to always be half the viewport width and have a height equal to 10 times the root font size. Which CSS achieves this?
A.container { width: 50%; height: 10vw; }
B.container { width: 50vh; height: 10em; }
C.container { width: 50vw; height: 10rem; }
D.container { width: 50rem; height: 10vh; }
Attempts:
2 left
💡 Hint
Remember what vw and rem mean.
❓ accessibility
expert
2:30remaining
Ensuring accessible font scaling with relative units
Which CSS practice best supports users who adjust their browser's default font size for accessibility?
AUse <code>em</code> units only inside deeply nested elements.
BUse only <code>px</code> units for precise control over font size.
CUse <code>vh</code> units for font sizes to scale with viewport height.
DUse <code>rem</code> units for font sizes and avoid fixed pixel sizes.
Attempts:
2 left
💡 Hint
Think about how font sizes respond to user settings.