How to Create Drop Caps in CSS

Everyone loves drop caps. In order to create one in CSS, all you have to do is use the first-letter speudo selector and you can give your letter all kinds of styles:

/* Make drop-caps with the first-letter selector */

.dear-lorem:first-letter {
  font-size: 300%;
  float: left;
  margin: 10px;
  font-family: fantasy;
  color: #FFF;
}

There's only one problem with this. It will style the first letter of every paragraph. To get around this, change the above selector to the following:

.dear-lorem:first-child:first-letter { /* Your initial styles goes here */ }

This will only select the first child — your very first paragraph inside your content.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The first-letter selector in CSS
• The first-child selector