CSS Text decoration, CSS Text transform

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.