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.
unexpectedly simple