CSS Text

CSS has a lot of ways we can manipulate a page, but perhaps one of the most fundamental is adjusting text and fonts on a page. There are a lot of ways to alter how text looks in CSS, let's take a look.

Text Color

To change text color, we use the color property.

css Copy
p { color: red; }

The above would make all paragraphs have red text.

Aligning text

We can align text within an element using text-align. This property can be set to left, right, center, or justify.

css Copy
p { text-align: center; }

This text has text align set to center!

Text Transformations

Text transformations refer to changing the case of text. We can do this with text-transform. This property can be set to:

  • initial - use the original case for the text, i.e. do not change any characters.
  • uppercase - change all characters to uppercase
  • lowercase - change all characters to lowercase.
  • capitalize - capitalize the first letter of each word.
css Copy
p { text-transform: uppercase; }

This text has text-transform set to uppercase!

Letter and Word Spacing

We can set the space between individual words and individual letters using word-spacing and letter-spacing respectively:

css Copy
p { word-spacing: 10px; letter-spacing: 1px; }

This text has word and letter spacing

Text Decoration

Text decoration refers to underlining, or adding lines above text. It can be adjusted with the text-decoration property. There are four main properties:

  • text-decoration-line - the position of the line. It can be underline, overline, none or line-through.
  • text-decoration-color - the color of the line.
  • text-decoration-style - the style of the line. This can be solid, double, dotted, dashed or wavy.
  • text-decoration-thickness - the width of the line, i.e. 5px.

These can all be condensed into one property, i.e:

css Copy
p { text-decoration: underline red wavy 3px; }

This text has text decoration

Text Shadow

This allows us to add a shadow to our text. It uses a slightly more complex syntax, which looks like this:

text-shadow: x-distance y-distance blur color;

For example, the below adds a red shadow 2px from the left, 2px from the top, and with 10px of blur:

css Copy
p { text-shadow: 2px 2px 10px red; }

This text has text shadow

Last Updated Saturday, 3 April 2021