0
0
CSSmarkup~30 mins

Font size in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Font Size Styling with CSS
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the page to have clear, readable text with different font sizes for the heading and the paragraph.
🎯 Goal: Build a webpage with a heading and a paragraph. Use CSS to set the heading font size to 2.5rem and the paragraph font size to 1.25rem.
📋 What You'll Learn
Create an HTML file with a heading and a paragraph inside the <main> element.
Add a CSS rule to set the font size of the heading to 2.5rem.
Add a CSS rule to set the font size of the paragraph to 1.25rem.
Use semantic HTML elements and ensure the CSS is linked correctly.
💡 Why This Matters
🌍 Real World
Setting font sizes is a basic but essential skill for making text readable and visually appealing on websites.
💼 Career
Web developers and designers frequently adjust font sizes to improve user experience and accessibility.
Progress0 / 4 steps
1
Create the HTML structure
Create an HTML file with a <main> element containing a <h1> heading with the text "Welcome to Sweet Treats" and a <p> paragraph with the text "Delicious baked goods made fresh daily."
CSS
Need a hint?

Use semantic tags: <main>, <h1>, and <p>.

2
Add a CSS file and link it
Create a CSS file named styles.css and link it to your HTML file using a <link> tag inside the <head> section.
CSS
Need a hint?

Use <link rel="stylesheet" href="styles.css"> inside the <head>.

3
Set the font size for the heading
In the styles.css file, write a CSS rule to set the font size of the h1 element to 2.5rem.
CSS
Need a hint?

Use the selector h1 and set font-size: 2.5rem;.

4
Set the font size for the paragraph
In the styles.css file, add a CSS rule to set the font size of the p element to 1.25rem.
CSS
Need a hint?

Use the selector p and set font-size: 1.25rem;.