CSS Text decoration
You can set various inline text style through text-decoration.
p {
text-decoration: underline;
}
The above css code underline the paragraph text.
The following page style with different css text-decoration properties in each paragraph.
<html>
<head>
<style type="text/css">
.uline{
text-decoration: underline;
}
.oline{
text-decoration: overline;
}
.lline{
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="uline">
The text in this paragraph is underlined
</p>
<p class="oline">
The text in this paragraph is overlined
</p>
<p class="lline">
The text in this paragrapg shows line-through
</p>
</body>
</html>
CSS text-decoration on html link
You can apply the text-decoration property to any of the four link states. For example, if you want to remove the default underline of a HREF link when you hover it, you can use text-decoration: none;
a:hover
{
text-decoration: none;
}
Source Code
<html>
<head>
<style type="text/css">
a:hover
{
text-decoration: none;
}
</style>
</head>
<body>
Try mouse the mouse over to the link. <br>
<a href="http://corelangs.com/html/default.html">Corelangs</a>
</body>
</html>
output
CSS Text transform
The text-transform property is to manipulate the case of the text.
p {
text-transform: capitalize;
}
The above code transform starting letter of each word as capital.
In the following example the above three text-transform property is applied.
<html>
<head>
<style type="text/css">
.capital
{
text-transform: capitalize;
}
.lower
{
text-transform: lowercase;
}
.upper
{
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="capital">
this paragraph applied capitalize
</p>
<p class="lower">
This paragraph applied LOWERCASE
</p>
<p class="upper">
This paragraph applied CAPITAL
</p>
</body>
</html>
output
From the above image, you can see in the first line each starting word is capitalized because we applied text-transform: capitalize; to the first line.