Spruce Up Your Text: The Power of the first-letter Property in CSS

May 31, 2024
css
blog

Have you ever admired those beautifully styled first letters (drop caps) that grace websites and printed publications? Well, fret no more! The initial-letter property in CSS grants you the power to create these eye-catching design elements effortlessly.

What is the first-letter Property?

Forget complex HTML markup or inline styles. The first-letter property lets you define styles directly within your CSS for the first letter of an element. This translates into cleaner code and a more streamlined workflow.

The Magic of first-letter

This property offers two main functionalities:

  • Specifying the Size: Define how many lines the first letter should occupy. This creates the classic drop cap effect.
  • Controlling Alignment: Set the vertical positioning of the first letter relative to the surrounding text (no browser support).

Let’s Code!

.article {
  font-size: 16px;
}

.article p:first-letter {
  font-size: 2em; 
  background-color: #ddd;
  color: #fff;
  padding: 0 5px; 
}

In this example, the first letter of the first paragraph within the .article element gets styled as a two-line drop cap with a subtle background.

Browser Compatibility

The first-letter is widely supported by modern browsers except firefox. Also the first-letter-align property which ensures that the letter stays centered within the first line, is not supported yet.