Line height in CSS - Mini Project: Build & Apply

Adjusting Line Height for Better Readability

📖 Scenario: You are creating a simple webpage with a paragraph of text. The text looks cramped and hard to read. You want to improve the spacing between lines to make it easier on the eyes.

🎯 Goal: Build a webpage with a paragraph and use CSS to set the line height to improve readability.

📋 What You'll Learn

Create an HTML file with a paragraph inside a <main> element

Add a CSS rule to set the line height of the paragraph to 1.6

Use semantic HTML5 elements

Ensure the CSS is linked or embedded properly

💡 Why This Matters

🌍 Real World

Web designers and developers often adjust line height to make text easier to read on websites, improving user experience.

💼 Career

Understanding and applying line height is a fundamental skill for front-end developers and UI designers to create accessible and visually pleasing web pages.

1

Create the HTML structure with a paragraph

Write the HTML code to create a <main> element containing a <p> paragraph with the exact text: "Learning to adjust line height improves text readability."

CSS

Need a hint?

Use the <main> tag to wrap your paragraph and write the exact text inside a <p> tag.

2

Add a CSS selector for the paragraph

Add a CSS rule that selects the p element. You only need to write the selector line: p {

CSS

  Learning to adjust line height improves text readability.


p {
  /* Your CSS properties here */
}

Need a hint?

Start your CSS rule by writing p { to target the paragraph.

3

Set the line height property

Inside the p CSS rule, add the property line-height and set it to 1.6. Write exactly: line-height: 1.6;

CSS

p {
  /* Set line height here */
}

Need a hint?

Use the CSS property line-height with the value 1.6 followed by a semicolon.

4

Complete the CSS rule with closing brace

Add the closing brace } to finish the p CSS rule.

CSS

p {
  line-height: 1.6;
  /* Close the CSS rule here */
}

Need a hint?

Close your CSS rule with a } to complete the style block.