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.


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