CSS

CSS Text

Sponsor

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.

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.

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.
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:

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:

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:

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

This text has text shadow

Last Updated Saturday, 3 April 2021
Johnny Simpson
Johnny Simpson

Subscribe for Daily Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email