Text decoration in CSS - Mini Project: Build & Apply

Text Decoration Styling with CSS

📖 Scenario: You are designing a simple webpage for a local bookstore. You want to make the book titles stand out by adding different text decorations like underline, overline, and line-through.

🎯 Goal: Create CSS rules to add different text decorations to three book title paragraphs: underline, overline, and line-through.

📋 What You'll Learn

Use the CSS text-decoration property

Apply underline to the first book title

Apply overline to the second book title

Apply line-through to the third book title

Use semantic HTML with <main> and <p> tags

💡 Why This Matters

🌍 Real World

Text decoration is commonly used in websites to highlight links, emphasize important text, or show deleted content with line-through.

💼 Career

Knowing how to style text decorations is essential for front-end developers to create visually appealing and accessible web pages.

1

Create the HTML structure with book titles

Write the HTML code to create a <main> section containing three paragraphs with the exact texts: Book One, Book Two, and Book Three. Each paragraph should have a class: underline, overline, and line-through respectively.

CSS

Need a hint?

Use the <p> tag with the class attribute for each book title inside the <main> tag.

2

Add CSS selectors for each text decoration class

Create CSS rules for the classes .underline, .overline, and .line-through. For now, just write the selectors with empty curly braces.

CSS

  Book One
  Book Two
  Book Three


/* Add CSS selectors below */
.underline {
  
}
.overline {
  
}
.line-through {
  
}

Need a hint?

Write CSS selectors for each class name followed by curly braces.

3

Apply the correct text decoration styles

Inside the CSS rule for .underline, set text-decoration to underline. For .overline, set text-decoration to overline. For .line-through, set text-decoration to line-through.

CSS

  Book One
  Book Two
  Book Three


.underline {
  /* Add text-decoration underline */
}
.overline {
  /* Add text-decoration overline */
}
.line-through {
  /* Add text-decoration line-through */
}

Need a hint?

Use the CSS property text-decoration with the correct value inside each class.

4

Add a responsive font size for better readability

Add a CSS rule for the p tag that sets the font size to 1.5rem. This will make the book titles easier to read on all devices.

CSS

  Book One
  Book Two
  Book Three


.underline {
  text-decoration: underline;
}
.overline {
  text-decoration: overline;
}
.line-through {
  text-decoration: line-through;
}

/* Add font size for all paragraphs */
p {
  
}

Need a hint?

Use the selector p and set font-size to 1.5rem.