Styling the First Letter

Drop caps have been used for a long time with print media to add flair to the first letter of a section or chapter. It draws attention and entices the reader.


The ::first-letter pseudo-element applies styles to the first letter of a block container.

Syntax

This is the syntax. Append the pseudo element after the target element selector and change the styles of the first letter.

p::first-letter {
    font-size: 200%;
    color: blue;
}

Text Content Only

The styles applied by ::first-letter apply to text content exclusively; non-text content will not be affected.

E.g. images, inline tables.



Subscribe to read the full content