CSS Text decoration

You can set various inline text style through text-decoration.

CSS 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 underline

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; }


<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 none

CSS Text transform

The text-transform property is to manipulate the case of the text.

CSS text transform

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>


CSS capitalize

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.