Text Decoration

In the last lesson you learned about Text Alignment. That was about where your text sits on the line. Now let’s look at how to add lines on your text, like the underline below a link.

🎨 What is Text Decoration?

When you read a webpage, some words have a line under them. You click them and they take you somewhere. Those are links. That line under a link is a decoration.

Text decoration is a CSS feature that adds a line on your text. The line can go under the text, over the text, or right through the middle.

So text decoration is not about the words themselves. It is about a line drawn on the words. You decide where the line goes and what it looks like.

Think of a teacher marking a worksheet. The teacher draws a line under an important word. The teacher crosses out a wrong answer with a line through it. The word stays the same. Only the line is new. That is what text decoration does.

🤔 Why Do We Need It?

Here is the real problem. By default a link comes with a blue color and an underline. But sometimes you do not want that underline. Or you have plain text and you DO want a line on it. So you need a way to add or remove that line yourself.

Text decoration solves this for you. Here is what it lets you do.

• Remove the underline from links so they look clean, like the menu at the top of a website.
• Add an underline to normal text to make one word stand out.
• Cross out a price with a line through it, like a sale price on Amazon.
• Show the old text and the new text in an edit, with the old one crossed out.

🧩 The Syntax

The main property is text-decoration. You give it a value that says what line you want.

The short way looks like this. You write the property, then the line you want.

p {
  text-decoration: underline;
}

The common values are easy to remember.

That word none is the one you will use the most. It is how you take the underline off a link.

✏️ A Simple Example

Let’s try all the lines at once so you can see the difference. Each paragraph gets a different decoration.

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

And here is the HTML that uses these classes. Each line of text picks one class.

<p class="under">This text has a line under it.</p>
<p class="over">This text has a line above it.</p>
<p class="through">This text has a line through it.</p>

🛒 A Real Example: A Sale Price

Now a real one you see every day. On a shopping site the old price is crossed out and the new price sits next to it. You can build that with line-through.

Here we cross out the old price and keep the new price normal.

.old-price {
  text-decoration: line-through;
  color: gray;
}
.new-price {
  color: red;
}

The HTML puts the two prices side by side. The old one gets the crossed-out look.

<p>
  <span class="old-price">$50</span>
  <span class="new-price">$30</span>
</p>

🔗 Removing the Underline from Links

This is the one you will reach for again and again. Links come with an underline by default. In a top menu that underline looks messy. So you turn it off with none.

This rule removes the underline from every link.

a {
  text-decoration: none;
}

🎨 Styling the Line Itself

You can do more than pick where the line goes. You can change the line’s color, its style, and how thick it is. The full text-decoration property lets you set them all together.

This makes a wavy red line under the text, a bit thicker than normal.

.spell-error {
  text-decoration: underline wavy red;
}

That wavy look is the same squiggly red line you see under a spelling mistake in a text box. Other styles you can use are solid (a normal straight line), dotted, and dashed.

You can also set these one at a time with their own properties.

⚠️ Common Mistakes

A few small slips trip up beginners. Watch out for these.

• Writing the value wrong. It is line-through, not linethrough or strikethrough. The spelling has to match exactly.
• Forgetting that none is your tool for links. People try to hide the underline in strange ways when one line, text-decoration: none;, does it.
• Removing the underline from normal text by accident. An underline on plain text can make readers think it is a link and try to click it.
• Mixing up overline and underline. Over means above. Under means below. Say it slowly and you will not swap them.

✅ Best Practices

Keep these habits and your text will look clean and clear.

• Use line-through for old prices and finished tasks. That is what readers expect it to mean.
• Remove link underlines in menus. But keep them inside long paragraphs so readers can spot links while reading.
• If you take an underline off a link, add color or bold so it still looks clickable.
• Save overline for special cases. It is rare, so it can look odd on normal text.

🧩 What You’ve Learned

You picked up a small but handy CSS skill. Here is the short version.

• ✅ text-decoration adds a line on your text: under, over, or through it.
• ✅ underline, overline, line-through, and none are the main values.
• ✅ none removes the underline from links, which is great for menus.
• ✅ line-through is perfect for crossed-out sale prices and done tasks.
• ✅ You can style the line’s color, style (like wavy), and thickness.

🚀 What’s Next?

Nice work. You can now add and remove lines on your text with confidence. Next we move from text to the space around your boxes, starting with the margin.

CSS Margin