Have you ever read a book or news article that had the first letter of a chapter or paragraph larger than the rest? This is called a drop cap or initial cap and has been used in books and manuscripts for generations.
Today, we’ll learn how to create drop caps for our written content on the web with just a little bit of CSS . We’ll use the :first-letter CSS pseudo-element to take control of the first letter of our paragraph and make it stand out.
:first-letter CSS pseudo-element
The :first-letter CSS pseudo-element allows you to style the first letter of a piece of content. This feature supported by all modern browsers comes in handy when implementing drop caps or initial caps styling for your web page. With the :first-letter CSS pseudo-element you have full control over how to style only the first letter. Let’s see how this works in practice.
Example
Step 1: Use :first-letter pseudo-element
Our first step will be to define where this style should be applied. In our example, we’ll say any element that has a class of .ex1 should have the :first-letter CSS pseudo-element applied and to start we’ll set it’s color to blueviolet and set the font size to 500%.
.ex1:first-letter {
color: blueviolet;
font-size: 500%;
}
The paragraph below has the class of ex1 and thus the first letter O has the :first-letter CSS pseudo-element attributes applied.
Once upon a time in a land far far away there lived a developer who loved learning about CSS. She spent all day and night exploring the different properties, pseudo-elements, and experimental features and coming up with all sorts of crazy designs that you wouldn't think are possible with just CSS.
This looks ok, but with a little more CSS we can really make our drop cap conform to what we’d expect from a drop cap. Let’s do that next.
Step 2: Add More CSS
.ex2:first-letter {
color: blueviolet;
font-size: 500%;
float: left;
line-height: 0.9;
margin-right: 10px;
}
To emulate the traditional drop cap we added a couple additional styles to play with the positioning of the first letter. We could of course add any other CSS attribute to change the look and feel of the first letter of our paragraph, but I think you get the point.
Once upon a time in a land far far away there lived a developer who loved learning about CSS. She spent all day and night exploring the different properties, pseudo-elements, and experimental features and coming up with all sorts of crazy designs that you wouldn't think are possible with just CSS.
In this post, we learned about the :first-letter CSS pseudo-element and how we can use it to create an initial or drop cap letter. All major browsers support this element so feel free to use it in your applications and make your introductions stand out.