Dropcap in Css using the ::first-letter pseudo-element selector

Have you ever used the ::first-letter pseudo selector with font-size to style the first letter of a paragraph and it didn’t look right?

Instead of using font-size use this new simple yet useful css property.

The initial-letter property allows you to specify the size of the initial letter, in terms of how many lines it occupies, and the number of lines it should sink.

example:

.dropcap::first-letter {
    color: red;
    initial-letter: 3 3;
    padding: 0px 10px;
}

HTML:

<p class="dropcap">
    Debitis venenatis pretium aliquip do cum labore eum enim! Diam!
    Class veniam. Aliquam facilisi nisi nonummy cupidatat do
    voluptates diamlorem inceptos dui magni parturient dignissimos
    aute eum consequat.
</p>

Result: