Font size in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the computed font size of the paragraph?

Given the CSS below, what will be the font size of the paragraph text in the browser?

CSS

html {
  font-size: 16px;
}
body {
  font-size: 1.25rem;
}
p {
  font-size: 120%;
}

A 24px

B 19.2px

C 16px

D 20px

💡 Hint

Remember that 1rem equals the font size of the root element (html).

The root font size is 16px. The body font size is 1.25rem, which is 1.25 × 16px = 20px. The paragraph font size is 120% of the body font size, so 120% × 20px = 24px.

❓ rendering

intermediate

Which CSS rule will make the heading twice as large as the base font size?

Assuming the base font size is 16px, which CSS rule will render the heading text at 32px?

A h1 { font-size: 2rem; }

B h1 { font-size: 200%; }

C h1 { font-size: 32px; }

D All of the above

💡 Hint

Think about how rem, percentage, and px units relate to the base font size.

All options set the font size to 32px:

• 2rem = 2 × 16px = 32px
• 200% of base 16px = 32px
• 32px directly sets the size

Therefore, all options produce the same visual size.

❓ selector

advanced

Which CSS selector targets only paragraphs with font size exactly 1.5rem?

Given multiple paragraphs with different font sizes, which selector matches only those with font size 1.5rem?

A p[style$='font-size: 1.5rem']

B p[style^='font-size: 1.5rem']

C p[style*='font-size: 1.5rem']

D p[style='font-size: 1.5rem']

💡 Hint

The *= attribute selector matches if the value contains the substring anywhere.

Option C uses *= which matches if the style attribute contains the substring 'font-size: 1.5rem' anywhere, so it matches paragraphs with that font size even if other styles exist.

Option C requires the style attribute to be exactly 'font-size: 1.5rem', so it fails if other styles are present.

Options A and C match only if the style ends or starts exactly with that substring, which is less flexible.

❓ layout

advanced

How does changing font size affect Flexbox layout?

In a flex container with items sized by font size (using em units), what happens if the container's font size increases?

A Flex items grow larger because em units scale with the container's font size.

B Flex items stay the same size because em units are fixed to the root font size.

C Flex items shrink because font size increase reduces available space.

D Flex items disappear because em units become invalid.

💡 Hint

Remember that em units depend on the font size of the element itself or its parent.

Em units scale relative to the font size of the element or its parent. If the container's font size increases, items sized with em units inside it become larger.

Option A is incorrect because em units are not fixed to root font size (that's rem).

Options C and D are incorrect because increasing font size does not shrink or invalidate em units.

❓ accessibility

expert

Which font size practice best supports accessibility for users with low vision?

Choose the CSS font size approach that best supports accessibility and user control.

A Use fixed pixel font sizes like 14px for all text.

B Use relative font sizes like rem or em and allow user scaling.

C Use very small font sizes to fit more content on screen.

D Use absolute font sizes with !important to prevent changes.

💡 Hint

Think about how users can adjust text size in their browsers or devices.

Using relative units like rem or em allows text to scale based on user preferences and browser settings, improving accessibility.

Fixed pixel sizes (option B) prevent scaling and can make text too small or too large for some users.

Very small font sizes (option B) reduce readability.

Using !important (option B) blocks user adjustments, harming accessibility.

Practice

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