Font size in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the font size of the paragraph to 1.5rem.

CSS

p {
  font-size: [1];
}

Drag options to blanks, or click blank then click option'

Alarge

B15px

C150%

D1.5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixels (px) instead of rem for better scalability.

Using keywords like 'large' which are less precise.

The font-size property sets the size of the text. Using 1.5rem means 1.5 times the root font size, which is a good practice for responsive design.

2fill in blank

medium

Complete the code to make the heading font size twice the size of the parent element's font size.

CSS

h1 {
  font-size: [1];
}

Drag options to blanks, or click blank then click option'

A2em

B200rem

C2px

D20%

Attempts:

3 left

💡 Hint

Common Mistakes

Using px which is absolute and not relative.

Using rem which is relative to root, not parent.

The em unit is relative to the font size of the parent element. Setting font-size: 2em; doubles the size relative to the parent.

3fill in blank

hard

Fix the error in the code to correctly set the font size to 18 pixels.

CSS

div {
  font-size: [1];
}

Drag options to blanks, or click blank then click option'

Apx18

B18px

C18

Dsize:18px

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the unit.

Writing units before the number.

Using invalid property syntax.

Font size values must include units like px for pixels. Just writing 18 is invalid CSS.

4fill in blank

hard

Fill both blanks to set the font size of paragraphs to 120% and headings to 2rem.

CSS

p {
  font-size: [1];
}
h2 {
  font-size: [2];
}

Drag options to blanks, or click blank then click option'

A120%

B1.2em

C2rem

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up em and rem units.

Using absolute units like px when relative units are better.

Using 120% increases the font size by 20% relative to the parent. Using 2rem sets the heading size to twice the root font size.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets a class .highlight with font size 1.25rem, line height 1.5, and font weight bold.

CSS

.highlight {
  font-size: [1];
  line-height: [2];
  font-weight: [3];
}

Drag options to blanks, or click blank then click option'

A1.25rem

B1.5

Cbold

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using units for line height (should be unitless or length).

Using numeric font-weight instead of keywords like 'bold'.

This CSS sets the font size to 1.25 times the root font size, line height to 1.5 times the font size for good spacing, and font weight to bold for emphasis.

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