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.

Practice

1. What does the CSS property font-weight control in text?

easy

A. How thick or thin the text appears

B. The color of the text

C. The size of the text

D. The font family used

Solution

1. Step 1: Understand the role of font-weight

   The font-weight property changes the thickness of the text, making it look bolder or lighter.

2. Step 2: Compare with other text properties

   Color changes text color, size changes text size, and font family changes the font style, not thickness.

3. Final Answer:

   How thick or thin the text appears -> Option A

4. Quick Check:

   font-weight controls thickness [OK]

Hint: Remember: weight means thickness of letters [OK]

Common Mistakes:

• Confusing font-weight with font-size
• Thinking font-weight changes color
• Mixing font-weight with font-family

2. Which of the following is the correct CSS syntax to make text bold using font-weight?

easy

A. font-weight: bold;

B. font-weight: 1000;

C. font-weight: heavy;

D. font-weight: strong;

Solution

1. Step 1: Recall valid font-weight values

   Valid values include keywords like normal, bold, or numbers 100 to 900 in steps of 100.

2. Step 2: Check each option

   font-weight: bold; uses bold which is correct. font-weight: 1000; uses 1000 which is invalid. Options A and D use invalid keywords.

3. Final Answer:

   font-weight: bold; -> Option A

4. Quick Check:

   Use 'bold' keyword for bold text [OK]

Hint: Use 'bold' keyword or 700 for bold text [OK]

Common Mistakes:

• Using numbers outside 100-900 range
• Using invalid keywords like 'heavy' or 'strong'
• Missing semicolon at end

3. What will be the visual difference between these two CSS rules?

p.normal { font-weight: 400; }
p.bold { font-weight: 700; }

medium

A. Text with class 'bold' is italicized

B. Both texts look exactly the same

C. Text with class 'normal' is bolder than 'bold'

D. Text with class 'normal' is thinner than text with class 'bold'

Solution

1. Step 1: Understand numeric font-weight values

   400 is the normal weight, and 700 is the bold weight, so 700 is thicker text.

2. Step 2: Compare the two classes visually

   Text with class 'normal' will appear thinner than text with class 'bold'. Italic style is unrelated to font-weight.

3. Final Answer:

   Text with class 'normal' is thinner than text with class 'bold' -> Option D

4. Quick Check:

   400 < 700 means thinner < bolder [OK]

Hint: Higher number means thicker text [OK]

Common Mistakes:

• Thinking 400 is bolder than 700
• Confusing font-weight with font-style
• Assuming no difference between 400 and 700

4. Identify the error in this CSS snippet:

h1 { font-weight: 950; }

medium

A. Missing units after 950

B. 950 is not a valid font-weight value

C. font-weight cannot be used on h1

D. Should use font-style instead of font-weight

Solution

1. Step 1: Check valid font-weight numeric values

   Valid numeric values are multiples of 100 from 100 to 900 only.

2. Step 2: Validate the given value

   950 is outside the valid range, so it is invalid and will be ignored by browsers.

3. Final Answer:

   950 is not a valid font-weight value -> Option B

4. Quick Check:

   font-weight numbers must be 100-900 [OK]

Hint: Use multiples of 100 between 100 and 900 [OK]

Common Mistakes:

• Using numbers outside 100-900
• Adding units like px or em to font-weight
• Confusing font-weight with font-style

5. You want to highlight a warning message by making its text thicker but not fully bold. Which font-weight value is best to use?

hard

A. font-weight: 300;

B. font-weight: 900;

C. font-weight: 600;

D. font-weight: normal;

Solution

1. Step 1: Understand font-weight scale

   Lower numbers like 300 are light, 400 is normal, 700 is bold, and 900 is very bold.

2. Step 2: Choose a weight thicker than normal but less than bold

   600 is between normal (400) and bold (700), so it makes text thicker but not fully bold.

3. Final Answer:

   font-weight: 600; -> Option C

4. Quick Check:

   600 is semi-bold, perfect for emphasis [OK]

Hint: Use 600 for semi-bold emphasis [OK]

Common Mistakes:

• Using 300 which is lighter than normal
• Using 900 which is too bold
• Using 'normal' which is not thicker