13. CSS Text

What you will learn

How to align and space text
How to decorate and transform text
How to set line height and letter spacing
How to add shadows and shorten long text

Text alignment

text-align controls the horizontal alignment of text inside its box. Values are left, right, center, and justify.

Example

<style>
  .l { text-align: left; }
  .c { text-align: center; }
  .r { text-align: right; }
  p { background-color: #eaf5ff; padding: 6px; margin: 6px 0; }
</style>

<p class="l">Left aligned</p>
<p class="c">Centered</p>
<p class="r">Right aligned</p>

Output

Left aligned

Centered

Right aligned

Long paragraphs are easiest to read left-aligned. Avoid justify on narrow columns, because it can leave large uneven gaps between words.

Text decoration

text-decoration adds or removes lines. Links have an underline by default.

Example

<style>
  .over { text-decoration: overline; }
  .under { text-decoration: underline; }
  .strike { text-decoration: line-through; }
  .fancy { text-decoration: underline wavy crimson; }
</style>

<p class="over">Overline</p>
<p class="under">Underline</p>
<p class="strike">Line through</p>
<p class="fancy">Wavy red underline</p>

Output

Overline

Underline

Line through

Wavy red underline

Text transformation

Example

<style>
  .up { text-transform: uppercase; }
  .low { text-transform: lowercase; }
  .cap { text-transform: capitalize; }
</style>

<p class="up">make me uppercase</p>
<p class="low">MAKE ME LOWERCASE</p>
<p class="cap">capitalize every word</p>

Output

make me uppercase

MAKE ME LOWERCASE

capitalize every word

Spacing

Property	What it controls
`line-height`	Height of each line. A unitless number such as `1.6` is best
`letter-spacing`	Space between letters
`word-spacing`	Space between words
`text-indent`	Indent of the first line

Example

<style>
  .airy {
    line-height: 1.8;
    letter-spacing: 1px;
    text-indent: 30px;
    max-width: 320px;
  }
</style>

<p class="airy">Generous line height makes long paragraphs much easier to read, especially on small screens.</p>

Output

Generous line height makes long paragraphs much easier to read, especially on small screens.

A line height between 1.4 and 1.7 works well for body text.

Text shadow

text-shadow takes a horizontal offset, a vertical offset, a blur, and a colour.

Example

<style>
  .shadow {
    font-size: 32px;
    font-weight: bold;
    color: #0d6efd;
    text-shadow: 2px 2px 4px rgba(8, 43, 89, 0.4);
  }
</style>

<p class="shadow">Shadow text</p>

Output

Shadow text

Shortening long text

Three properties together show “…” when text is too long for its box.

Example

<style>
  .clip {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #0d6efd;
    padding: 6px;
  }
</style>

<p class="clip">This sentence is far too long to fit inside the box.</p>

Output

This sentence is far too long to fit inside the box.

Common mistakes

Using text-align: center and expecting it to centre the box itself. It only centres the text inside.
Setting line-height with a unit, such as 20px, which does not scale if the font size changes.
Removing link underlines with no other visual clue that they are links.
Typing text in capital letters in the HTML instead of using text-transform. Screen readers may read it letter by letter.

Exercise

Style .title so it is centred, in capital letters, with 2px of letter spacing and a colour of #082b59.

Show solution

<style>
  .title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #082b59;
  }
</style>
<p class="title">welcome to my site</p>

Knowledge check

1. Which property changes text to capital letters?

text-transform: uppercase

2. Why is a unitless line-height such as 1.6 recommended?

It scales with the font size.

3. Which three properties show “…” on overflowing text?

white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.

Summary

Align text with text-align and decorate it with text-decoration.
Control spacing with line-height, letter-spacing, and word-spacing.
Use text-shadow sparingly, and keep text readable.