How to create drop caps effect using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS ::first-letter Pseudo-element

You can use the CSS ::first-letter pseudo-element to create beautiful drop caps for your articles. Drop caps are simply the first capital letter of a paragraph in much larger font size that has the depth of two or more lines of normal text.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Drop Caps with CSS</title>
  • <style type="text/css">
  •     p::first-letter {
  •         float: left;
  •         font-size: 5em;
  •         font-weight: bold;
  •         line-height: 1;
  •         text-shadow: 2px 2px 6px #000;
  •         margin: -0.07em 0.1em -0.1em 0;
  •     }
  • </style>
  • </head>
  • <body>
  •     <p>Tempor ipsum dolor sit amet...</p>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:


Your Feedback:


We would love to hear from you! Please say something.