DEV Community

Cover image for Using CSS 'first-letter' for cool drop cap styling.
SeanAUS120
SeanAUS120

Posted on

Using CSS 'first-letter' for cool drop cap styling.

It's as old as print itself but I think the dropcap is still a cool thing to make a blog post layout more interesting.

To make it work you need to target some psuedo classes with CSS. Specifically the first-child and first-letter ones, together. Here's a sample I'm using here.

p:first-child:first-letter {
   float:left;
   font-family:Georgia;
   font-size:80px;
   line-height:0.8;
   padding:2px 8px 0 0;
}
Enter fullscreen mode Exit fullscreen mode

Using this snippet at:
UCG
Print Miami
Wild Posters
Monster Tees

Top comments (0)