Drop caps are define as the first capital letter of a paragraph in much larger font size that has the depth of two or more lines of normal text.
The task can be done by using the CSS ::first-letter pseudo-element to create beautiful drop caps effect. The ::first-letter selector in CSS is used to apply style to the first letter of the first line of a block-level element, the condition is it should not be preceded by other content ( such as images or inline tables).
Syntax:
::first-letter {
// CSS Property
}
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg::first-letter {
font-size: 250%;
color: green;
}
div::first-letter {
font-size: 250%;
color: blue;
font-weight: bold;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
How to create drop caps
effect using CSS
</h1>
<p>
<div>Geeks</div>
<div>For</div>
<div>Geeks</div>
</p>
<p class="gfg">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Nov, 2020
Like Article
Save Article