Font weight in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text bold.

CSS

p {
  font-weight: [1];
}

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

Athin

Bbold

Clight

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'normal' which keeps text regular weight.

Using 'light' or 'thin' which make text thinner, not bold.

The font-weight property controls how thick or thin the text appears. The value bold makes the text bold.

2fill in blank

medium

Complete the code to set the font weight to a numeric value for medium thickness.

CSS

h1 {
  font-weight: [1];
}

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

A400

B900

C700

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 100 which is very thin.

Choosing 900 which is very bold.

Numeric font weights range from 100 (thin) to 900 (very bold). The value 400 is the normal weight, which is medium thickness.

3fill in blank

hard

Fix the error in the font-weight value to make the text bold.

CSS

div {
  font-weight: [1];
}

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

Astrong

Bbolded

Cbolder

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bolded' which is not a valid CSS value.

Using 'strong' which is an HTML tag, not a CSS value.

The correct CSS value to make text bold is bold. 'bolded' and 'strong' are not valid values for font-weight. 'bolder' is valid but means heavier than the parent font weight, not exactly bold.

4fill in blank

hard

Fill both blanks to set the font weight to a numeric value and make the text thicker than normal.

CSS

span {
  font-weight: [1];
  font-weight: [2];
}

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

A400

Bbold

C700

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'normal' instead of numeric 400 for the first value.

Using 'bold' instead of numeric 700 for the second value.

The first font-weight sets normal weight (400). The second overrides it with 700, which is thicker and equivalent to bold.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets font weight to bold using numeric and keyword values, and then resets to normal.

CSS

p {
  font-weight: [1];
  font-weight: [2];
  font-weight: [3];
}

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

A900

Bbold

Cnormal

D400

Attempts:

3 left

💡 Hint

Common Mistakes

Using 900 which is very bold instead of 400 for normal weight.

Using '900' or '900' for the last reset instead of 'normal'.

The first font-weight sets normal numeric weight (400). The second sets bold keyword. The third resets to normal keyword.