Open In App

Create a Drop Caps Effect using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 23 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads