What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

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 ↓

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 ~