In this post, we will learn how to make a drop cap in CSS. Before proceeding further, let us know what is meant by drop cap. A drop cap is a large capital letter at the beginning of a paragraph. Drop caps are used in newspaper, books and documents. Drop cap is used for decorative text or to get the reader's attention. So how we can make drop cap in CSS, we will learn in this post.


How To Make A Drop Cap In CSS ?


Drop Cap In CSS 

To make the drop cap in CSS, we simply use ::first-letter CSS selector. This selector select the first letter of the paragraph and then we apply style on it. By applying style we can create a beautiful drop cap. In the example below we make a drop cap.

<!DOCTYPE html>
<html>
<head>
<title>How To Make A Drop Cap In CSS ?</title>
<style>
p::first-letter {
float: left;
font-size: 3em;
font-weight: bold;
line-height: 1;
margin: -10px 4px 0 0;
}
</style>
</head>
<body>
<p>CodexRadar How To Make A Drop Cap In CSS ? How To Make A Drop Cap In CSS ? How To Make A Drop Cap In CSS ? How To Make A Drop Cap In CSS ? How To Make A Drop Cap In CSS ? How To Make A Drop Cap In CSS ?</p>
</body>
</html> code-box


Summary

In this post we learned how to make a drop cap in CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post