Line height in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the line height of paragraphs to 1.5.

CSS

p {
  line-height: [1];
}

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

A1.5

B15px

Cnormal

D150%

Attempts:

3 left

💡 Hint

Common Mistakes

Using units like px when a unitless number is preferred for line height.

Using 'normal' which is default but not 1.5.

The line-height property controls the space between lines of text. Using 1.5 sets the line height to one and a half times the font size, which improves readability.

2fill in blank

medium

Complete the code to set the line height of headings to 2.

CSS

h1 {
  line-height: [1];
}

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

A2

Bnormal

C200%

D20px

Attempts:

3 left

💡 Hint

Common Mistakes

Adding units like px which changes meaning.

Using 'normal' which is default spacing.

Setting line-height to 2 doubles the space between lines relative to the font size, making headings more spaced out.

3fill in blank

hard

Fix the error in the code to correctly set line height to 1.2.

CSS

div {
  line-height: [1];
}

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

A12px

B1.2em

C1.2

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Adding units like em or px which can cause unexpected results.

Using 'normal' which is default but not 1.2.

Using a unitless number like 1.2 for line-height is best practice because it scales with the font size. Adding units like em or px can cause inconsistent spacing.

4fill in blank

hard

Fill both blanks to set line height to 1.4 and font size to 16px.

CSS

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

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

A16px

B1.4

C14px

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using unitless number for font size.

Using px units for line height which is less flexible.

Setting font-size to 16px defines the text size. Setting line-height to 1.4 means the space between lines is 1.4 times the font size, improving readability.

5fill in blank

hard

Fill all three blanks to set font size to 18px, line height to 1.6, and paragraph color to blue.

CSS

p {
  font-size: [1];
  line-height: [2];
  color: [3];
}

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

A16px

B1.6

Cblue

D18px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up font size and line height values.

Using color names incorrectly.

Setting font-size to 18px makes text larger. line-height of 1.6 adds comfortable spacing between lines. color: blue changes text color to blue.