Text Decoration

Part of the Styling with CSS section of Coddy's HTML journey — lesson 22 of 76.

In CSS, the text-decoration property is used to add or remove decorations to text within an HTML element. This property allows you to underline, overline, or strike-through text, providing visual emphasis or indicating specific states.

Common values for text-decoration include:

none: Removes any text decoration. This is the default value.

underline: Adds an underline to the text.

overline: Adds an overline above the text.

line-through: Adds a line through the middle of the text (strikethrough).

For example:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Challenge

Easy

You are given an HTML document with a paragraph (<p>) that contains an anchor (<a>) element, and a division (<div>). Your task is to use the text-decoration property to style these elements. Follow the steps below:

Write a CSS rule that targets all <a> elements. Set the text-decoration to none to remove the default underline.
Add a class attribute with the value "underline" to the <p> element.
Write a CSS rule that targets all elements with the class underline. Set the text-decoration to underline.
Add a class attribute with the value "strike" to the <div> element.
Write a CSS rule that targets all elements with the class strike. Set the text-decoration to line-through.

Cheat sheet

The text-decoration property adds or removes decorations to text within HTML elements.

Common values:

none: Removes any text decoration (default)
underline: Adds an underline to the text
overline: Adds an overline above the text
line-through: Adds a strikethrough line

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Try it yourself

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>