Challenge - 5 Problems
Font Weight Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate2:00remaining
Understanding font-weight numeric values
Which CSS font-weight value will make the text appear bolder than normal but not as bold as the maximum weight?
Attempts:
2 left
💡 Hint
Think about the numeric scale where 400 is normal and 900 is the boldest.
✗ Incorrect
The font-weight property uses numeric values from 100 to 900 in increments of 100. 400 is normal weight, 900 is the boldest. 600 is bolder than normal but lighter than 900.
📝 Syntax
intermediate2:00remaining
Correct font-weight syntax
Which CSS rule correctly sets the font weight to bold?
Attempts:
2 left
💡 Hint
Remember the CSS property syntax uses a colon and no equals sign.
✗ Incorrect
The correct CSS syntax uses a colon to assign values, like font-weight: bold;. Using equals or missing colon causes errors.
❓ rendering
advanced2:00remaining
Visual difference of font-weight values
Given this CSS, what will the text look like?
p { font-weight: 300; }CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> p { font-weight: 300; } </style> <title>Font Weight Test</title> </head> <body> <p>This text is light.</p> </body> </html>
Attempts:
2 left
💡 Hint
Lower numeric font-weight values produce lighter text.
✗ Incorrect
Font-weight 300 is lighter than normal (400). The text strokes appear thinner but still visible.
❓ selector
advanced2:00remaining
Applying font-weight with class selectors
Which CSS rule will make all elements with class
highlight have bold text?Attempts:
2 left
💡 Hint
Class selectors start with a dot (.) in CSS.
✗ Incorrect
To select elements by class, use a dot before the class name. .highlight targets all elements with that class.
❓ accessibility
expert3:00remaining
Accessibility impact of font-weight choices
Why is it important to avoid using very light font-weight (like 100 or 200) for body text in web design?
Attempts:
2 left
💡 Hint
Think about how font thickness affects how easy it is to read text.
✗ Incorrect
Very light font-weight can make text hard to read, especially for people with vision difficulties or on screens with poor contrast. This reduces accessibility.