CSS Text Styling

Text is one of the most important parts of any website. With CSS, you can enhance your text beautifully—by aligning it, decorating it, transforming the case, adjusting spacing, and even adding shadows. Let’s explore!

Text Decoration

Use text-decoration to add lines above, below, or through your text.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    #overline { text-decoration: overline; }
    #underline { text-decoration: underline; }
    #strike { text-decoration: line-through; }
    #both { text-decoration: overline underline; }
  </style>
</head>
<body>
  <p id="overline">Overline text</p>
  <p id="underline">Underline text</p>
  <p id="strike">Strikethrough text</p>
  <p id="both">Both overline and underline</p>
</body>
</html>

Text Alignment

Align your text to the left, right, center, or justify it across the container.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    #left { text-align: left; }
    #right { text-align: right; }
    #center { text-align: center; }
    #justify {
      width: 300px;
      text-align: justify;
    }
  </style>
</head>
<body>
  <p id="left">Left aligned text</p>
  <p id="right">Right aligned text</p>
  <p id="center">Center aligned text</p>
  <p id="justify">This is a longer paragraph to demonstrate justified alignment across a fixed width container. It spreads the text evenly.</p>
</body>
</html>

Text Transform

Transform your text into uppercase, lowercase, or capitalized format.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    #upper { text-transform: uppercase; }
    #lower { text-transform: lowercase; }
    #capitalize { text-transform: capitalize; }
    #none { text-transform: none; }
  </style>
</head>
<body>
  <p id="upper">this will be uppercase</p>
  <p id="lower">THIS WILL BE LOWERCASE</p>
  <p id="capitalize">capitalize each word in this sentence</p>
  <p id="none">This Will Stay As Is</p>
</body>
</html>

Letter Spacing

Use letter-spacing to increase or decrease the space between characters.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
  <h1>Learn With Arshyan</h1>
</body>
</html>

Line Height

Adjust the space between lines of text using line-height.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      line-height: 2.5;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with increased line height.<br>
     The lines will be spaced farther apart.</p>
</body>
</html>

Text Shadow

Give your text some depth or glow using text-shadow.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      text-shadow: 2px 3px 4px red;
    }
  </style>
</head>
<body>
  <h1>Shadowed Text</h1>
</body>
</html>

Text Overflow

When text is too long to fit in its container, text-overflow handles it.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
    }
    .ellipsis {
      text-overflow: ellipsis;
    }
    .clip {
      text-overflow: clip;
    }
  </style>
</head>
<body>
  <p class="box ellipsis">This is some long text that will be truncated with an ellipsis.</p>
  <p class="box clip">This is some long text that will be clipped off.</p>
</body>
</html>