Bird
Raised Fist0
CSSmarkup~30 mins

Font size in CSS - Mini Project: Build & Apply

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
Font Size Styling with CSS
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the page to have clear, readable text with different font sizes for the heading and the paragraph.
🎯 Goal: Build a webpage with a heading and a paragraph. Use CSS to set the heading font size to 2.5rem and the paragraph font size to 1.25rem.
📋 What You'll Learn
Create an HTML file with a heading and a paragraph inside the <main> element.
Add a CSS rule to set the font size of the heading to 2.5rem.
Add a CSS rule to set the font size of the paragraph to 1.25rem.
Use semantic HTML elements and ensure the CSS is linked correctly.
💡 Why This Matters
🌍 Real World
Setting font sizes is a basic but essential skill for making text readable and visually appealing on websites.
💼 Career
Web developers and designers frequently adjust font sizes to improve user experience and accessibility.
Progress0 / 4 steps
1
Create the HTML structure
Create an HTML file with a <main> element containing a <h1> heading with the text "Welcome to Sweet Treats" and a <p> paragraph with the text "Delicious baked goods made fresh daily."
CSS
Hint

Use semantic tags: <main>, <h1>, and <p>.

2
Add a CSS file and link it
Create a CSS file named styles.css and link it to your HTML file using a <link> tag inside the <head> section.
CSS
Hint

Use <link rel="stylesheet" href="styles.css"> inside the <head>.

3
Set the font size for the heading
In the styles.css file, write a CSS rule to set the font size of the h1 element to 2.5rem.
CSS
Hint

Use the selector h1 and set font-size: 2.5rem;.

4
Set the font size for the paragraph
In the styles.css file, add a CSS rule to set the font size of the p element to 1.25rem.
CSS
Hint

Use the selector p and set font-size: 1.25rem;.

Practice

(1/5)
1. What does the CSS property font-size control on a webpage?
easy
A. The color of the text
B. The background color of the text
C. The spacing between letters
D. The size of the text displayed

Solution

  1. Step 1: Understand the role of font-size

    The font-size property in CSS sets how big or small the text appears on the screen.

  2. Step 2: Compare with other text properties

    Other properties like color or spacing control different aspects, not size.

  3. Final Answer:

    The size of the text displayed -> Option D

  4. Quick Check:

    font-size controls text size [OK]
Hint: Font size changes text height, not color or spacing [OK]
Common Mistakes:
  • Confusing font-size with color or spacing properties
  • Thinking font-size changes background color
  • Mixing font-size with letter-spacing
2. Which of the following is the correct CSS syntax to set the font size to 16 pixels?
easy
A. font-size: '16px';
B. font-size = 16px;
C. font-size: 16px;
D. font-size: 16;

Solution

  1. Step 1: Recall CSS property syntax

    CSS uses a colon (:) to assign values, and units like px must be without quotes.

  2. Step 2: Check each option

    font-size: 16px; uses correct syntax: property, colon, value with unit, and semicolon.

  3. Final Answer:

    font-size: 16px; -> Option C

  4. Quick Check:

    Correct CSS syntax uses colon and units without quotes [OK]
Hint: Use colon and units without quotes for CSS properties [OK]
Common Mistakes:
  • Using equal sign instead of colon
  • Putting units inside quotes
  • Omitting units like px
3. What will be the visual result of this CSS on a paragraph?
p { font-size: 2rem; }
medium
A. The paragraph text will be half the root font size
B. The paragraph text will be twice the root font size
C. The paragraph text will be 2 pixels tall
D. The paragraph text size will not change

Solution

  1. Step 1: Understand the unit rem

    rem means "root em" and is relative to the root (html) font size.

  2. Step 2: Interpret 2rem

    Setting font-size to 2rem means text will be twice as big as the root font size.

  3. Final Answer:

    The paragraph text will be twice the root font size -> Option B

  4. Quick Check:

    2rem doubles root font size [OK]
Hint: rem units scale relative to root font size [OK]
Common Mistakes:
  • Thinking rem is pixels
  • Confusing rem with em
  • Assuming no change in size
4. Identify the error in this CSS code snippet:
h1 { font-size: 20; }
medium
A. Missing unit after the number
B. Incorrect property name
C. Missing semicolon
D. Font size cannot be set on h1

Solution

  1. Step 1: Check the font-size value format

    CSS requires a unit like px, em, rem after numeric values for font-size.

  2. Step 2: Identify the missing unit

    The code uses "20" without any unit, which is invalid.

  3. Final Answer:

    Missing unit after the number -> Option A

  4. Quick Check:

    Font size needs units like px or rem [OK]
Hint: Always add units like px or rem after font-size numbers [OK]
Common Mistakes:
  • Omitting units like px or rem
  • Assuming numbers alone are valid
  • Confusing semicolon errors
5. You want to make all paragraph text larger but keep it responsive to user settings. Which CSS rule is best?
p { font-size: ?; }
hard
A. font-size: 1.2rem;
B. font-size: 18px;
C. font-size: 120%;
D. font-size: 1.2em;

Solution

  1. Step 1: Understand responsiveness and user settings

    To respect user font preferences (e.g., browser font size settings), use units relative to the root element.

  2. Step 2: Compare options for responsiveness

    px is fixed and doesn't scale with user changes. em and % are relative to parent and can compound in nesting. rem is relative to root font size, scaling perfectly with user settings.

  3. Step 3: Choose the best option

    1.2rem increases size by 20% relative to root, ideal for accessibility and responsiveness.

  4. Final Answer:

    font-size: 1.2rem; -> Option A

  5. Quick Check:

    rem units scale with root font size and user settings [OK]
Hint: Use rem units for scalable font sizes responsive to user preferences [OK]
Common Mistakes:
  • Using fixed px units ignoring user preferences
  • Using em which can compound unexpectedly
  • Confusing em/% with root-relative rem