HomeCSSFancy Drop Caps | CSS Tutorial

Fancy Drop Caps | CSS Tutorial

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn a simple trick. This trick will help you make your plain paragraphs captivating. And all you need for this is pure CSS.
 
So today, we are going to create drop caps. Drop caps are capital letters at the beginning of a paragraph used as a decorative entity. Now that we know what drop caps are, let us go ahead and create them.
 

Video Tutorial:

If you would like to learn along to a video tutorial, you can check out this video tutorial here down below. Also, don’t forget to subscribe to my youtube channel, where I post regular tricks, tips and tutorials.

Project Folder Structure:

Before we start coding, let us take a look at our project folder structure. We create a simple folder structure. The project folder is called – “Fancy Drop Caps”. Inside this folder, we have two files. The first one is – index.html and, the other is style.css. These files are the HTML document and the stylesheet respectively.

HTML:

Now we begin with HTML code. First, copy the code provided below and paste it into your HTML document. We are using two different fonts in this code. The first is – ‘Alex Brush’ – a cursive font. And the next one is a sans-serif font called ‘Poppins’.

The HTML code consists of a p tag. The p tag consists of a random paragraph.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fancy Drop Caps</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Alex+Brush&family=Poppins:wght@300&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>
      After hunting for several hours, we finally saw a large seal sunning
      itself on a flat rock. I took one of the wooden clubs while Larry took the
      longer one. We slowly snuck up behind the seal until we were close enough
      to club it over its head. The seal slumped over and died. This seal would
      help us survive. We could eat the meat and fat. The fat could be burned in
      a shell for light and the fur could be used to make a blanket. We declared
      our first day of hunting a great success. They decided to find the end of
      the rainbow. While they hoped they would find a pot of gold, neither of
      them truly believed that the mythical pot would actually be there. Nor did
      they believe they could actually find the end of the rainbow. Still, it
      seemed like a fun activity for the day, and pictures of them chasing
      rainbows would look great on their Instagram accounts. They would have
      never believed they would actually find the end of a rainbow, and when
      they did, what they actually found there. Love isn't always a ray of
      sunshine. That's what the older girls kept telling her when she said she
      had found the perfect man. She had thought this was simply bitter talk on
      their part since they had been unable to find true love like hers. But now
      she had to face the fact that they may have been right. Love may not
      always be a ray of sunshine. That is unless they were referring to how the
      sun can burn. It was a question of which of the two she preferred. On the
      one hand, the choice seemed simple. The more expensive one with a brand
      name would be the choice of most. It was the easy choice. The safe choice.
      But she wasn't sure she actually preferred it. There was something in the
      tree. It was difficult to tell from the ground, but Rachael could see
      movement. She squinted her eyes and peered in the direction of the
      movement, trying to decipher exactly what she had spied. The more she
      peered, however, the more she thought it might be a figment of her
      imagination. Nothing seemed to move until the moment she began to take her
      eyes off the tree. Then in the corner of her eye, she would see the
      movement again and begin the process of staring again. What was beyond the
      bend in the stream was unknown. Both were curious, but only one was brave
      enough to want to explore. That was the problem. There was always one that
      let fear rule her life.
    </p>
  </body>
</html>

CSS:

To add the drop caps and style the text, we use CSS. We start by removing paddings and margins from all the elements. Next, we set padding for the body.

In the next step, we apply the style to the p tag by setting the font -size to 32px and ‘line-height’ to 1.8em. Finally, we set the ‘font-family’ to ‘Poppins’.

Other Tutorial You Might Like:

Finally, we add the drop caps. For this, we use the ‘first-letter’ selector. We change the color of the first letter to ‘#2274fb’. We also change the ‘font-size’ to ‘120px’ and add some padding to the top and right of the letter. Most importantly set the float property to ‘left’. Lastly, we set the ‘font-family’ to ‘Alex Brush’.

Our drop caps are now ready. I hope you liked this tutorial. If you have any issues while creating this code you can download the source code by clicking on the download button below.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  padding: 30px;
}
p {
  text-align: justify;
  font-size: 32px;
  line-height: 1.8em;
  letter-spacing: 0.5px;
  font-family: "Poppins", sans-serif;
}
p::first-letter {
  color: #2274fb;
  font-family: "Alex Brush", cursive;
  font-size: 120px;
  float: left;
  padding-top: 0.35em;
  padding-right: 0.25em;
}

Also, I would love to hear from you guys. So if you have any queries, suggestions or feedback you can drop them in the comments below.
Happy coding.

RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twenty + 14 =

Most Popular