How to Create Drop Caps for the Text

A drop cap is a style where the first character of the first paragraph is larger and takes up several lines of the text or the first few sentences. It is generally used in books and newspaper articles, but you can be more imaginative and use it for your Website, giving it an original style.

It’s easy to do, so let’s try together.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Use the HTML <p> tag and give it a class named "drop-cap".

<p class="drop-cap">
 France is a beautiful country, filled to the brim with delicious wines, and tons of romance. So it’s no surprise that many people want to visit France more than any other country in the world, according to the United Nations World Tourism Organization. In 2017, France welcomed 86.9 million people. La vie est belle!
</p>

Add CSS

Style the <p> tag with the font-family, font-size and width properties. Also, add the margin property to create space around the text by choosing the “auto” value, which is the default value of this property.
Target the first letter of the paragraph by using the CSS first-letter pseudo-element, which is used to give a style to the first letter of the text. Add color and specify the margin and line-height properties.
Set the size with the font-size property. The size of the first letter must be much larger than the size of others.
Use the float property to define on which side of the container the element should be placed, and choose the “left” value, in order to move the letter to the left.

p {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 1.3em;
  width: 80%;
  margin: 0 auto;
}

p::first-letter {
  color: #A52A2A;
  float: left;
  font-size: 5em;
  margin: 0 .1em 0 0;
  line-height: 0.85;
}

Now let’s try some examples.

Example of creating a drop cap:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size: 1.3em;
        width: 80%;
        margin: 0 auto;
      }
      p::first-letter {
        color: #A52A2A;
        float: left;
        font-size: 5em;
        margin: 0 .1em 0 0;
        line-height: 0.85;
      }
    </style>
  </head>
  <body>
    <p class="drop-cap">
    France is a beautiful country, filled to the brim with delicious wines, and tons of romance. So it’s no surprise that many people want to visit France more than any other country in the world, according to the United Nations World Tourism Organization. In 2017, France welcomed 86.9 million people. La vie est belle!
    </p>
  </body>
</html>

Try it Yourself »

Result

France is a beautiful country, filled to the brim with delicious wines, and tons of romance. So it’s no surprise that many people want to visit France more than any other country in the world, according to the United Nations World Tourism Organization. In 2017, France welcomed 86.9 million people. La vie est belle!

You can also create a border around the first letter by using the CSS border property.

Example of creating a drop cap with a border around it:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: New Century Schoolbook;
        font-size: 1.3em;
        width: 80%;
        margin: 0 auto;
      }
      p::first-letter {
        color: #483D8B;
        float: left;
        font-size: 5em;
        border: 2px solid;
        border-radius: 5px;
        margin: 0 .1em 0 0;
        line-height: 0.85;
      }
    </style>
  </head>
  <body>
    <p class="drop-cap">
      France is a beautiful country, filled to the brim with delicious wines, and tons of romance. So it’s no surprise that many people want to visit France more than any other country in the world, according to the United Nations World Tourism Organization. In 2017, France welcomed 86.9 million people. La vie est belle!
    </p>
  </body>
</html>