First Letter Styling With CSS

::first-letter is another nice pseudo element which allows you to style the first letter in an element without needing to use additional HTML such as a tag. This method works the same as wrapping the first letter with its own HTML identifier.

The traditional method would look something like this:

HTML

<p>
 <span class="first-letter-style">T</span>he first letter is larger and blue.
</p>

CSS

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

The result:

The first letter is larger.

Now the simpler way to do this with the pseudo element ::first-letter.

HTML

<p class="first-letter-pseudo>
     The first letter is larger and blue.
</p>

CSS

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

Output from this code sample:

The first letter is larger.