Code Snippet

Home » Code Snippets » CSS » Drop Caps

Drop Caps

Cross-browser way (extra markup)

Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.

<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

CSS3 way (no extra markup)

Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Subscribe to The Thread

  1. Lucas Tadeu

    That’s a really nice funcionality, didn’t really know about the “first-letter”. Thanks for the tip!

    Reply ↓
  2. andieevans

    Actually it kind of works in ie8. If the paragraph has nothing before it ( etc) then it will work…

    Reply ↓
  3. Ken Lasher

    The first option gives you more control. I tried the second and the only that got a drop cap was the footer text. This is a cool feature. Having come from a print design background, I missed drop caps. I used to make images for this purpose back in the day. This is sweet!

    Reply ↓
  4. rohit

    small but nice

    Reply ↓
  5. Theraisa K

    Neat! I didn’t even think of using drop caps on a website, but now that I see it in action it could be very useful in a well-designed site.

    Reply ↓
  6. Graha Nurdian

    This is awesome ! nice tips mate :)

    Reply ↓
  7. Zach Stone

    Excellent snippet — I was having cross-browser issues with :first-letter, the span solution left me spic-n-pixel-perfect. Thanks!

    Reply ↓
  8. andry

    Thank you very much for this tip.

    Reply ↓
  9. Alistair
    p:first-child:first-letter

    This doesn’t seem to work, oh wow comment previews! King of Cascade, Chris Coyier!

    Reply ↓
  10. Alistair

    Sorry ended up a douchebag comment whilst amazement took place.

    Testing this in Chrome 13.0.782.220 m

    That selector doesn’t seem to work. However i’m noticing other bugs with this build on the laptop also. Weird artifacts being left in browser when multiple tabs are open.

    Reply ↓
  11. dewadg

    This steps helped me. Thanks for the tutorial :)

    Reply ↓
  12. Piotr Ślusarski

    Thank you! It works!

    Reply ↓
  13. Piotr Ślusarski

    BTW: are there any fonts that look particularly well and could be recommended to use in drop caps (apart from Georgia)?

    Reply ↓
  14. WyldKard

    The problem is that drop-caps will display elsewhere in your page too, like at the beginning of a blockquote or in a footer. Is there a way to restrict it _only_ to the first letter in a document?

    Reply ↓
    • That Guy

      Use more specific CSS selectors. For example, #maincontent p:first-child:first-letter {blah; blah;}

  15. Frank Ebbert

    Sweet to be sure! Thank you!

    I use text indents at times for my paragraphs. The drop cap technique produces the odd quirk of applying the indent to the rest of the word using the drop cap. So that word doesn’t line up with the text line below. To escape that, I set the text indent: 0; for that paragraph. Depending on my structure, I may have to play with selectors a bit.

    For CSS3, I keep this in mind too: the first-child pseudo selector applies the drop cap to the first <p> on the page. I’ve seen some impressive layouts where there are more than one drop per page. I’ve not done that yet, but I can see where I’d need to drop the first-child selector and simply use first-letter.

    Cheers to fine design.

    Reply ↓
  16. Lyoniel

    .. great trick, it is so useful, thanks!.

    Reply ↓
  17. dianejwright

    Hi all. Regarding the subsequent application of dropcaps on a page, it seems as if combinators do the trick! I found this: http://www.sitepoint.com/forums/showthread.php?585658-Pseudo-Class-first-child-Problem

    Reply ↓
  18. That Guy

    Great tip. Worked perfectly in Firefox 10. My font sizes are in percentages so, I had to tweak it a little to get it to display correctly in Chrome and IE9. Probably has something to do with how individual browsers render fonts.

    I had to add a line-height of 0.8em and add a negative bottom margin of -0.1em to get it to display correctly in Chrome and IE9.

    Reply ↓
  19. Steliyan

    Does this trick is usable in the wordpress theme?

    Reply ↓
  20. Dan Eden

    I’m almost certain that p:first-child:first-letter doesn’t work in any browser. At least, it’s not working for me in Chrome 18, Safari 5.2, Firefox 11, Opera 11.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~