Chapter 11. CSS: Styling Text and Images

Text-decoration

Tag:

The text-decoration property is used for adding different types of lines to text – underline, overline, or line-through (strikethrough).

One standard decoration line

When you add a standard decoration line, you just specify one keyword – underline, overline, or line-through.

selector{
  text-decoration: keyword;
}

Multiple decoration lines

You can also add multiple decoration lines specifying more than one keyword. For example, if you want to add an underline and overline at the same time, add both keywords with a space in between.

selector{
  text-decoration: underline overline;
}

Add designs to the decoration line

You can also change the design of the decoration line.

For example:
styles: Use one of the keywords: solid (default), double, dotted, dashed, or wavy.

thickness: Use length units or auto.

color: Use color code or keyword.

You can specify all parameters using one line code like in the example below.

selector{
  text-decoration: underline double red 2px;
}

<u> and <s> tag

Underline and strikethrough (line-through) can also be implemented directly by HTML. The <u> tag is used to add an underline. The <s> tag is used to add a strikethrough (line-through).

Practice

Objective:
Set different decoration lines

1. Update the body section of the HTML file

Add the code below at the end of the <body> section in the chapter11.html file.

chapter11.html

<h2>Text Decoration</h2>
<h3>Add standard decoration lines</h3>
<p>Text Decoration: Original</p>
<p style="text-decoration: none;">Text Decoration: None</p>
<p style="text-decoration: underline;">Text Decoration: Underliine</p>
<p style="text-decoration: overline;">Text Decoration: Overline</p>
<p style="text-decoration: line-through;">Text Decoration: Line Through (Strikethrough)</p>
<p style="text-decoration: underline overline;">Text Decoration: Underline and Overline</p>
<h3>Add design to the decoration line</h3>
<p style="text-decoration: underline;">Text Decoration: Underline</p>
<p style="text-decoration: underline wavy;">Text Decoration: Underline Wavy</p>
<p style="text-decoration: underline wavy blue;">Text Decoration: Underline Wavy Blue</p>
<p style="text-decoration: underline wavy blue 2px;">Text Decoration: Underline Wavy Blue 2px</p>
<hr>

2. Check the result with a browser

Open chapter11.html with a browser.
You can see the different types of text decoration lines.

You can also check the sample result here (Demo Site ).

demo code