CSS Text Formatting

Text Alignment

The text-align property controls horizontal alignment of text inside a block:

left (default)
center
right
justify (stretches text to fill the line)

p {
  text-align: center;
}

Text Decoration

Use text-decoration to underline, overline, strike-through, or remove decoration from text.

a {
  text-decoration: none;
}

Text Transformation

Use text-transform to control capitalization:

uppercase
lowercase
capitalize (first letter of each word)

h1 {
  text-transform: uppercase;
}

Letter and Word Spacing

letter-spacing adjusts space between characters. word-spacing adjusts space between words.

h2 {
  letter-spacing: 2px;
  word-spacing: 5px;
}

Text Indentation

Use text-indent to indent the first line of a paragraph:

p {
  text-indent: 30px;
}

Practice Prompt

Apply text formatting to two elements:

h1: center-aligned, uppercase, underlined
p: 20px indent, 3px letter spacing

<h1 style="text-align: center; text-transform: uppercase; text-decoration: underline;">
  Welcome
</h1>

<p style="text-indent: 20px; letter-spacing: 3px;">
  This paragraph is indented and has increased spacing between letters.
</p>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu