Lesson 15: Text Decoration

❮ Previous Lesson Next Lesson ❯

In lesson 14, we have learned how to change case of text using text-transform property. In this lesson, we shall learn how to add lines to text using text-decoration property in CSS. The text-decoration property has four values, namely none, underline, overline and line-through.

15.1 None

The none value of text-decoration property removes any lines added to the text. It is commonly used to remove underlines placed by the browsers for hyperlinks. The syntax is as shown in the following example:

h1{text-decoration:none;}

15.2 Underline

The underline value of text-decoration is to place a line under the text, The syntax is shown in the following example:

p{text-decoration:underline;}

15.3 Overline

The overline value of text-decoration is to place a line on top of the text. The syntax is illustrated in the following example:

 span{text-decoration:overline;"}

15.4 Line-Through

The line-through value of text-decoration is to draw a line through the text. The syntax is illustrated in the following example:

h3{text-decoration:line-through;"}

Example 15.1

<html>
<head>
<style type=”text/css”>
.under{text-decoration: underline;}

.over{text-decoration:overline;}

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

a{text-decoration:none}

</style>

</head>
<body>
<h2 class="under">What is Text Decoration?</h2>

<p>Text decoration is to add <span class="underline">underline</span>' <span class="over">overline</span> and <span class="lineth">line through </span>the text
</p>

<p> To learn more, please follow our <a href="https://javascript-tutor.net/css/csstutor.htmlindex.php/css-tutorial/"> CSS Tutorial</a></p>

</body>
</html>

The Output

What is Text Decoration?

Text decoration is to add underline' overline and line through the text To learn more, please follow our CSS Tutorial

❮ Previous Lesson Next Lesson ❯