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;
}
drop-caps.css
Copied to clipboard!

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 */ }
drop-caps.css
Copied to clipboard!

This will only select the first child โ€” your very first paragraph inside your content.

How to Create Drop Caps in CSS
If you would like to see more Webtips, follow @flowforfrank

Resources:

Remove ads
Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.