best websites of the world
780-633-0415
INFO@PAPER-LEAF.COM

about a 1 minute read

How to Make Drop Caps in CSS & WordPress

Drop caps, otherwise known as initials, have long been a staple of print designers. Marking the beginning of a new section of text, drop caps are a great way to add a little bit of visual interest to whatever piece you’re typesetting. Thanks to the wonders of CSS, we can make this happen in modern browsers too (IE8+)!

How to Make Drop Caps in CSS & WordPress

Static HTML Drop Cap

If the site you’re working on is a static HTML site – meaning, no dynamic content, no CMS etc – adding a drop cap is a simple two-step process.

First, open your style.css file and add the following lines:

p.drop:first-letter {
font-size: 40px;
float: left;
margin:5px;
}

Next, add a class titled “drop” to the paragraph element you’d like to have the drop cap.

<p class="drop">This paragraph will start with a drop cap.</p>

There you go!

WordPress Dynamic Drop Cap

Drop caps are a little different when the content on the site is being handled by a CMS – a wrong bit of code can leave you with drop caps starting every paragraph. Not ideal.

But the code that follows won’t leave your web copy riddled with drop caps. Instead, it will turn the first letter of the first word of the first paragraph element on your page or post into a drop cap. Note the CSS class “.post”; this is WP specific and is generated by the loop. If you aren’t using the loop/don’t have a div class wrapping your content titled “.post”, this will not work.

Here’s the code:

.post p:first-child:first-letter {
font-size: 40px;
float: left;
margin:5px;
}

This is how we got rolling with drop caps over on the Chorus Magazine build.

Custom Styling Your Drop Cap Initial

Of course, once you have your drop cap working, play around with the styling if you wish. You can change the font; you can change the drop cap color; add text-shadows; background colors and so forth. The only limits are your imagination and what CSS can do. For some inspiration, check out Daily Drop Cap too!

one of us one of us

The Paper Leaf Design Weekly

If you love design, you’ll love the Paper Leaf Design Weekly. Join thousands of other designers getting wallpapers, in-depth design articles, free fonts & other design goodies delivered via our weekly design newsletter. Why wait? Join now and don’t miss a beat!