How To Create A Drop Cap in CSS

Drop Caps ! So they are one of the cool ways to design your site. The first thing you need to know is what is a drop cap ? Drop Cap is the one that you see in most of the books that the first letter of a chapter would have different stylings. It would have a bigger font size when compared to other parts of the paragraph. That is called as a drop cap. You can see that in this post too. So lets see on how to add that using CSS.

Using a Span :

One of the easy way to do that is to cover the first character of a paragraph to be within a span. You can do that using the CSS code like in the below.

<style>
.dropcap {
  float: left;
  color: #0072c5;
  font-size: 50px;
  line-height: 50px;
  margin-top: -3px;
  padding-right: 5px;
}
</style>
<p><span class = 'dropcap'>D</span>rop Caps are really awesome !</p>

Targeting first character using CSS :

In most cases it is possible that the text that you would like to enter in would be dynamic and so the above method would not be of use in such a case. So lets see on how to handle it. It can be done using CSS selectors.

<style>
p:first-child:first-letter {
  float: left;
  color: #0072c5;
  font-size: 50px;
  line-height: 50px;
  margin-top: -3px;
  padding-right: 5px;
}
</style>
<p>Drop Caps are really awesome !</p>

The output of this method would be the same as that of the previous method.But there is a catch here. This method wouldn't work for IE < 9. But that would not be a big problem. Only a very small percent of IE users would be using IE < 9. So don't worry about that. The output of the above methods would be something like the follows :

Drop Caps

And so that is it about this short post. Happy Designing :)

Tweet