0
0
CSSmarkup~15 mins

Font weight in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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
Need a 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
Need a 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
Need a 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
Need a hint?

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