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.