Relative units in CSS - Mini Project: Build & Apply

Using Relative Units in CSS for Responsive Text

📖 Scenario: You are creating a simple webpage that needs to have text that adjusts size based on the user's device or browser settings. This helps make your page easier to read on phones, tablets, and desktops.

🎯 Goal: Build a webpage with a heading and paragraph where the font sizes use relative units rem and em so the text scales nicely on different screen sizes.

📋 What You'll Learn

Use rem units for the heading font size

Use em units for the paragraph font size

Set the root font size in the html selector

Include a <header> with a heading and a <main> with a paragraph

Make sure the CSS uses relative units only for font sizes

💡 Why This Matters

🌍 Real World

Websites need to be readable on many devices. Using relative units like <code>rem</code> and <code>em</code> helps text scale properly for phones, tablets, and desktops.

💼 Career

Front-end developers use relative units to create accessible and responsive designs that adapt to user preferences and device sizes.

1

Create the HTML structure

Write the HTML skeleton with a <header> containing an <h1> with the text "Welcome to My Site" and a <main> containing a <p> with the text "This text will resize based on your device."

CSS

  Welcome to My Site


  This text will resize based on your device.

Need a hint?

Remember to include the <header> and <main> tags with the exact text inside.

2

Set the root font size using html selector

Add a CSS rule for the html selector that sets the font size to 16px. This will be the base size for relative units.

CSS

  
  
  Relative Units Example
  
    html {
      /* Set root font size here */
    }
  


  
    Welcome to My Site
  
  
    This text will resize based on your device.
  

Need a hint?

Use the html selector and set font-size: 16px; inside the <style> tag.

3

Use rem for the heading font size

Add a CSS rule for the header h1 selector that sets the font size to 2rem. This means the heading will be twice the root font size.

CSS

  
  
  Relative Units Example
  
    html {
      font-size: 16px;
    }
    header h1 {
      /* Set font size to 2rem here */
    }
  


  
    Welcome to My Site
  
  
    This text will resize based on your device.
  

Need a hint?

Use the selector header h1 and set font-size: 2rem; inside the CSS.

4

Use em for the paragraph font size

Add a CSS rule for the main p selector that sets the font size to 1.25em. This means the paragraph text size is 1.25 times the size of its parent element's font size.

CSS

  
  
  Relative Units Example
  
    html {
      font-size: 16px;
    }
    header h1 {
      font-size: 2rem;
    }
    main p {
      /* Set font size to 1.25em here */
    }
  


  
    Welcome to My Site
  
  
    This text will resize based on your device.
  

Need a hint?

Use the selector main p and set font-size: 1.25em; inside the CSS.