←    Back

How to Create Drop Cap Letters in CSS

Drop Cap is a traditional newspaper technique of making the first letter of a paragraph capital and take the height of three or four lines. In that way, it is easier to grab the attention of the reader and specify the start of a section.

In this tutorial we are going to implement that style in our css using a new CSS3 technique.

CSS First Letter

CSS allows you to add a property :first-letter which as you can guess allows you to style the first letter of the element.

Consider this paragraph:

We can add the drop cap style to the paragraph using :first-letter

This css will stylize the first letter exactly how we want.

Published:

Under:

With:

By:

How to Create Drop Cap Letters in CSS
Previous Article
Early Devices to Project Animation before Films
Next Article
Advantages of HTML5
How to Create Drop Cap Letters in CSS