Styling the First Letter with CSS ::first-letter Property

::first-letter is another useful pseudo-element that allows you to style the first letter of text within any element without the need to modify the HTML or add any specific tags like span. The method works similarly to a scenario in which you wrapped the first letter with a specific tag.

The traditional and old way of styling the first letter looks like this:

HTML

<p>
    <span class="first-letter-style">T</span>he first letter is big & orange.
</p>

CSS

.first-letter-style{
    font-size: 30px;
    color: #c54088;
}

And the result will look like the following style:

However, a simpler way to achieve this is by using the same pseudo-element called ::first-letter as shown in the following example:

HTML

<p class="first-letter-pseudo">
     The first letter is big & orange.
</p>

CSS

.first-letter-pseudo::first-letter {
    font-size: 30px;
    color: #c54088;
}

And the result will be the same as the first example:

Browser Support

That’s it. If you’re interested in CSS, take a look at the new selectors coming our way in “CSS4” – and there’s a good reason why I’m mentioning this in parentheses… 🙂