Text Spacing, Decoration and Effects

What Is It?

Text properties control spacing, indentation, capitalization, and emphasis without changing the source text.

Properties, Tags and Attributes Explained

• letter-spacing: Adds or removes space between characters.
• word-spacing: Changes spacing between words.
• text-indent: Indents the first formatted line of a block.
• text-transform: Changes visual capitalization.
• text-shadow: Paints a shadow behind text.
• text-decoration-color / text-decoration-thickness / text-underline-offset: Control the appearance and placement of an underline.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Heading spacing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Spacing, Decoration and Effects</title>
  <style>
    h2 { letter-spacing: .08em; text-transform: uppercase; text-shadow: 1px 2px 2px #cbd5e1; }
    p { word-spacing: .15em; text-indent: 1.5em; }
  </style>
</head>
<body>
  <h2>Course notes</h2><p>Spacing changes the rhythm of a line. Keep body text easy to read.</p>
</body>
</html>

What you see: The heading is visually uppercase and spaced; the paragraph first line is indented.

Example 2: Readable underline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Spacing, Decoration and Effects</title>
  <style>
    a { color: #1d4ed8; text-decoration-color: #7c3aed; text-decoration-thickness: 3px; text-underline-offset: .25em; }
  </style>
</head>
<body>
  <a href="#notes">Read the notes</a><p id="notes">Practice with small changes.</p>
</body>
</html>

What you see: The link has a thick purple underline offset below the text.

When and Where to Use It

Use modest letter spacing for short labels and underline controls for links that are easy to recognize.

Common Mistake or Useful Tip

Long all-uppercase paragraphs are harder to scan. text-transform changes presentation, rather than the stored text.

Try It Yourself

Change the underline offset and thickness independently.