How to Customize Texts in CSS

Text decoration

Next, let's talk about text properties. We'll start with text decorations, which defines decorative lines you can add to the text.

For example, by setting the text-decoration-line property to underline, you can add an underline like this:

p {
  text-decoration-line: underline;
}

Other possible values include overline, which is a line displayed over the text:

p {
  text-decoration-line: overline;
}

Or line-through, which is a line displayed across the text:

p {
  text-decoration-line: line-through;
}

The text-decoration-line property also allows you to specify multiple decoration lines by separating them with spaces:

p {
  text-decoration-line: underline overline;
}

After setting the decoration line, you can further customize it by defining a color using the text-decoration-color property:

p {
  text-decoration-line: underline;
  text-decoration-color: red;
}

Or customize its thickness using the text-decoration-thickness property:

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

Or use the text-decoration-style property to define a style, such as dotted, wavy, and so on:

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

When the text-decoration-line is set to underline, you can customize the line's offset using text-underline-offset:

p {
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

This seems like a lot of work for just a decorative line. Luckily, CSS offers a shortcut, text-decoration, which allows you to define the type, style, thickness, and color simultaneously.

It follows the syntax shown below:

{
  text-decoration: <text-decoration-line> <text-decoration-style> <text-decoration-color> <text-decoration-thickness>;
}

p {
  text-decoration: underline wavy red 2px;
}

However, note that the text-decoration shorthand is not yet supported with Safari. You must use the individual properties discussed above if your webpage needs to be compatible with the browser.

Text shadow

The text-shadow property let's you add shadows to the text for more creative effects.

p {
  font-size: 50px;
  text-shadow: 5px 5px 2px red;
}

text-shadow accepts a list of values with the following syntax:

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Text transform

Lastly, the text-transform property allows you to transform the texts into uppercase, lowercase, or capitalize the first letter of each word.

<p class="original">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quo?
</p>
 
<p class="lowercase">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quo?
</p>
 
<p class="uppercase">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quo?
</p>
 
<p class="capitalize">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quo?
</p>

.lowercase {
  text-transform: lowercase;
}
 
.uppercase {
  text-transform: uppercase;
}
 
.capitalize {
  text-transform: capitalize;
}