Bird
Raised Fist0
CSSmarkup~5 mins

Relative units in CSS - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Recall & Review
beginner
What are relative units in CSS?
Relative units are measurements that depend on another value, like the size of the parent element or the root font size. They help make designs flexible and responsive.
Click to reveal answer
beginner
What does em unit represent in CSS?
em is a relative unit that equals the font size of the current element. For example, if the font size is 16px, 1em equals 16px.
Click to reveal answer
intermediate
How is rem different from em?
rem stands for 'root em' and is always relative to the root element's font size (usually the <html> font size), not the current element's font size.
Click to reveal answer
beginner
What does the % unit mean in CSS?
The % unit is relative to the size of the parent element. For example, width: 50% means half the width of the parent container.
Click to reveal answer
beginner
Why use relative units instead of fixed units like px?
Relative units make your website adapt to different screen sizes and user settings, improving accessibility and responsiveness.
Click to reveal answer
Which CSS unit is always relative to the root element's font size?
Aem
Brem
Cpx
D%
If a parent element has a width of 400px, what is the width of a child element with width: 50%?
A200px
B50px
C400px
D100px
What does 1em equal if the current element's font size is 20px?
A20px
BDepends on the root font size
C24px
D16px
Which unit is NOT a relative unit in CSS?
Arem
Bem
C%
Dpx
Why are relative units important for accessibility?
AThey prevent resizing
BThey make text size fixed
CThey allow text to scale with user settings
DThey only work on desktop
Explain the difference between em and rem units in CSS.
Think about which element's font size each unit depends on.
You got /3 concepts.
    Describe why using relative units helps make a website responsive and accessible.
    Consider how fixed sizes behave on small or large screens.
    You got /4 concepts.

      Practice

      (1/5)
      1. Which CSS unit is relative to the root element's font size?
      easy
      A. em
      B. rem
      C. px
      D. vw

      Solution

      1. Step 1: Understand root-relative units

        The rem unit always refers to the font size set on the root <html> element.

      2. Step 2: Compare with other units

        em is relative to the parent element's font size, px is fixed pixels, and vw is relative to viewport width.

      3. Final Answer:

        rem -> Option B

      4. Quick Check:

        Root font size = rem [OK]
      Hint: Root font size uses rem, not em or px [OK]
      Common Mistakes:
      • Confusing em with rem
      • Thinking px is relative
      • Mixing viewport units with font units
      2. Which of the following is the correct syntax to set a font size to 2 times the parent element's font size?
      easy
      A. font-size: 2vw;
      B. font-size: 2rem;
      C. font-size: 2px;
      D. font-size: 2em;

      Solution

      1. Step 1: Identify the unit for parent-relative size

        em units scale relative to the parent element's font size.

      2. Step 2: Check other options

        rem is root-relative, px is fixed, and vw is viewport width relative.

      3. Final Answer:

        font-size: 2em; -> Option D

      4. Quick Check:

        Parent-relative font size = em [OK]
      Hint: Use em for parent-relative sizes, rem for root-relative [OK]
      Common Mistakes:
      • Using rem instead of em for parent size
      • Using px which is fixed size
      • Confusing vw with font size units
      3. Given the CSS below, what will be the width of the <div> if the viewport width is 1000px?
      div {
  width: 50vw;
}
      medium
      A. Depends on parent width
      B. 50px
      C. 500px
      D. 1000px

      Solution

      1. Step 1: Understand vw unit

        1vw equals 1% of the viewport width. So 50vw is 50% of viewport width.

      2. Step 2: Calculate width

        Viewport width is 1000px, so 50vw = 50% of 1000px = 500px.

      3. Final Answer:

        500px -> Option C

      4. Quick Check:

        50vw = 50% viewport width = 500px [OK]
      Hint: vw is % of viewport width, multiply by viewport size [OK]
      Common Mistakes:
      • Thinking vw depends on parent width
      • Confusing vw with px
      • Calculating 50vw as 50px
      4. What is wrong with this CSS if the goal is to make the font size 1.5 times the parent font size?
      p {
  font-size: 1.5rem;
}
      medium
      A. rem is root-relative, not parent-relative
      B. 1.5rem is invalid syntax
      C. font-size cannot use rem units
      D. Should use px instead of rem

      Solution

      1. Step 1: Identify unit behavior

        rem units are relative to the root font size, not the parent element.

      2. Step 2: Match goal with unit

        To scale relative to the parent font size, em should be used instead of rem.

      3. Final Answer:

        rem is root-relative, not parent-relative -> Option A

      4. Quick Check:

        Parent-relative size needs em, not rem [OK]
      Hint: Use em for parent-relative font size, not rem [OK]
      Common Mistakes:
      • Thinking rem scales with parent
      • Believing 1.5rem is invalid syntax
      • Using px for scalable font sizes
      5. You want a button width to be 30% of the viewport width but never smaller than 200px. Which CSS snippet correctly uses relative units and a minimum width?
      hard
      A. button { width: 30vw; min-width: 200px; }
      B. button { width: 30%; min-width: 200vw; }
      C. button { width: 30rem; min-width: 200px; }
      D. button { width: 30em; min-width: 200%; }

      Solution

      1. Step 1: Understand width units

        30vw means 30% of viewport width, which matches the requirement.

      2. Step 2: Check minimum width

        min-width: 200px ensures the button never shrinks below 200 pixels.

      3. Step 3: Verify other options

        Other options fail: 30rem is root font-relative; 30% with min-width: 200vw uses parent-relative width and huge min-width; 30em with min-width: 200% uses font-relative and parent-relative units incorrectly.

      4. Final Answer:

        button { width: 30vw; min-width: 200px; } -> Option A

      5. Quick Check:

        30vw + min-width: 200px [OK]
      Hint: Use vw for viewport %, min-width in px for fixed minimum [OK]
      Common Mistakes:
      • Using % for viewport width instead of vw
      • Setting min-width in vw or % incorrectly
      • Confusing rem/em with viewport units