Text Decoration and Text Transform in Css

« Prev Next »

The text properties specify the alignment of text, letter spacing, word spacing, color, etc.

 

CSS Text Decoration

The CSS text-decoration property is used to decorate text. For example, to underline, overline or strike through the text. It can also be used to remove text decoration from the text.

Syntax

selector {
  text-decoration: value;
}

css-text-decoration-and-text-transform

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-decoration: underline;
    }

    a {
      text-decoration: none;
      color: blue;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

<p>This paragraph has an underline decoration.</p>
<a href="#">This link has no underline by default, but will have one on hover.</a>

</body>
</html>
Run ›

Common Values for text-decoration

Value Description
none Removes any text decoration (e.g., no underline, no strikethrough).
underline Adds an underline to the text.
overline Adds a line over the text.
line-through Adds a line through the text (strikethrough).
blink Makes the text blink (not widely supported).

CSS Text Transform

CSS text-transform property is used to change the case of the text. With the text-transform property, you can make the text appear in uppercase or lowercase. You can also capitalize the first letter of each word in a text.

Example

selector {
  text-transform: value;
}

Common Values for text-transform

Value Description
uppercase Transforms the text to uppercase (all letters become capitalized).
lowercase Transforms the text to lowercase (all letters become small letters).
capitalize Capitalizes the first letter of each word.
none No transformation applied, keeping the text as is.

Example: Text Transformations

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      text-transform: uppercase;
    }

    p {
      text-transform: capitalize;
    }

    a {
      text-transform: lowercase;
      color: red;
    }
  </style>
</head>
<body>

<h1>This Heading is Uppercase</h1>
<p>This is a paragraph with each word's first letter capitalized.</p>
<a href="#">This link text is lowercase.</a>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.