CSS Tutorial Lesson 15: Text Decoration

TwitterShare/Bookmark

[Lesson 14]<<[Contents]>>[Lesson 16]

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=”http://htmltutor.org/index.php/css-tutorial/”> CSS Tutorial</a></p>

</body>
</html>

 

 The Output

What is Text Decoration?

Text decoration is to add underlineoverline and line through the text

To learn more, please follow our CSS Tutorial

[Lesson 14]<<[Contents]>>[Lesson 16]