Bird
Raised Fist0
CSSmarkup~15 mins

Font weight in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Styling Text with Font Weight in CSS
📖 Scenario: You are creating a simple webpage to show different font weights for headings and paragraphs. This helps users see how text can look bolder or lighter.
🎯 Goal: Build a webpage with a heading and a paragraph. Use CSS to set the font weight of the heading to bold and the paragraph to normal weight.
📋 What You'll Learn
Create an HTML skeleton with a <h1> heading and a <p> paragraph
Add a CSS rule to set the font weight of the heading to 700 (bold)
Add a CSS rule to set the font weight of the paragraph to 400 (normal)
Use semantic HTML and include a <style> block inside the <head>
Ensure the CSS selectors target the correct elements
💡 Why This Matters
🌍 Real World
Web designers often need to control how bold or light text appears to improve readability and design.
💼 Career
Knowing how to use font-weight in CSS is a basic skill for front-end developers and web designers to create visually appealing websites.
Progress0 / 4 steps
1
Create the HTML structure
Write the basic HTML5 structure with lang="en", a <head> containing <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Inside the <body>, add a <h1> with the text "Welcome to Font Weight Demo" and a <p> with the text "This paragraph shows normal font weight."
CSS
Hint

Start with the basic HTML5 page structure. Add the heading and paragraph inside the body.

2
Add a CSS style block
Inside the <head>, add a <style> block where you will write CSS rules to style the heading and paragraph.
CSS
Hint

Use the <style> tag inside the head to write CSS rules.

3
Set font weight for the heading
Inside the <style> block, write a CSS rule that selects the h1 element and sets its font-weight property to 700.
CSS
Hint

Use the selector h1 and set font-weight: 700; inside the style block.

4
Set font weight for the paragraph
Inside the same <style> block, add a CSS rule that selects the p element and sets its font-weight property to 400.
CSS
Hint

Use the selector p and set font-weight: 400; inside the style block.

Practice

(1/5)
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