Grow your CSS skills. Land your dream job.

Last updated on:

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; }

Comments

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

  2. andieevans
    Permalink to comment#

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

  3. 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!

  4. small but nice

  5. 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.

  6. This is awesome ! nice tips mate :)

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

  8. andry
    Permalink to comment#

    Thank you very much for this tip.

  9. Alistair
    Permalink to comment#
    p:first-child:first-letter
    

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

  10. Alistair
    Permalink to comment#

    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.

  11. Permalink to comment#

    This steps helped me. Thanks for the tutorial :)

  12. Thank you! It works!

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

  14. 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?

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

  15. Frank Ebbert
    Permalink to comment#

    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.

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

  17. 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

  18. 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.

  19. Does this trick is usable in the wordpress theme?

  20. 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.

  21. Instead of :first-child you need to use :first-of-type. Otherwise the “first child” could be a <h1> for example.

  22. I’m using

    .content > p:first-of-type:first-letter {/* DROP CAP style */}

    In a WP theme as it avoids confusing by photos and / or their captions appearing as the first elements in the target div. My problem is IE9 – it seems to take no notice of the line-height value which sets the vertical position in every other browser I’ve tested including IE 8 and IE 10. I cannot find away to adjust the vertical position of the drop cap in IE 9 – can you help me?

    See my site at: http://graphicviolence.co.uk and my CSS for my drop cap is:

    .art-postcontent > p:first-of-type:first-letter
    {
    letter-spacing:0;
    text-transform:uppercase;
    color:#250607;
    font-size:50px;
    font-weight:normal;
    float:left;
    margin:5px 5px -7px 0; /* THESE VALUES SET TXT WRAP AROUND DROP CAP */
    line-height:1; /* THIS SETS BASELINE POSITION OF DROP CAP */
    }

    Thanks
    t

  23. Gerry O'Neill
    Permalink to comment#

    @ Ken Lasher – two years late – anyways your better off using the followind type selector:

    .article>p:nth-of-type(1):first-letter

    The nth-of-type is a damn good way of selecting ;)

    • Gerry O'Neill
      Permalink to comment#

      @ Ken Lasher – two years late – anyways your better off using the following type selector:

      .article>p:nth-of-type(1):first-letter

      The nth-of-type is a damn good way of selecting ;)

      Typo on the first copy of my comment, had to fix ;)

  24. syahrul
    Permalink to comment#

    what is font you using in?

  25. Permalink to comment#

    CSS Tricks saves the day again! When I don’t know whether something can be done, I almost always check here first. I had no idea there was a first-letter pseudo class.

    Thanks for this!

  26. Rams
    Permalink to comment#

    I have no idea how you – and only you – manage to answer my questions in 3 year old posts!
    Thank you for sharing the knowledge

  27. I needed to make the first letter of the first paragraph of each blog entry a drop cap and I needed <ie8 compatibility. I worked it out using the “+” selector.

    #div A + B {}

    If you’re savvy you can probably just look at my codepen and figure it out: http://codepen.io/TannerCampbell/pen/vlDut

    Here’s a little bit of an explanation though:

    #column-left p:first-letter {
      font-size: 3em;
    }

    That would take all p elements inside the #column-left id and make their first letter a dropcap. But that’s useless if you only want the first character to have the dropcap. By adding the preceding element and the + selector like so:

    #column-left h6 + p:first-letter {
      font-size: 3em;
    }

    You’re telling the browser, “Hey, Browser. I would like you to find all the p’s inside of #column-left and if they are preceded by an h6 tag, I’d like you to give their first letter a font size of 3em.”

    This is useful if you have multiple repeat occurrences of the same layout inside of one div or id. Like, for instance, a WordPress theme.

    Hope this was helpful to someone. Have a good one!

    Best,
    Tanner

  28. Kenneth John

    Thanks it really helped me. I have got one question I need to add an

    effect but I need to define its width too how is it possible

  29. Al Augustin
    Permalink to comment#

    We used some jQuery in order to implement the CSS3 version across all browsers Sample Link

  30. Eric Jussaume
    Permalink to comment#

    The drop caps code snippet works great. Its simple and easy I used it on my portfolio website http://ejstudios.net and it looks great. Just put in the CSS snippet into the appearance > editor and the span into the html in the text of the actual page you want it to be displayed in.

  31. Works well, unless you start the paragraph with quotes. :D (scrsht http://i.sqr.fr/SmMS )

  32. Hyshka
    Permalink to comment#

    Used responsive units for 16px base font size:

    font-size: 4.687em;
    line-height: .8em;
    padding-top: .25rem;
    padding-right: .5rem;
    padding-left: .187rem;
    margin-bottom: -.1em;
    
  33. It will only work, if there is not any element before it. The p tag should be the very first element of your html.

    • Ajay
      Permalink to comment#

      Not true… I’m using it like so .content p:first-child:first-letter { ... }

      Just add some selector before to target the exact p tag you want….

    • Use .dropcaps:first-letter instead. Just add the class=”dropcaps” to any p tag you want the drop cap to appear in.

  34. Permalink to comment#

    Unfortunately (for me) it seems that first-letter only works for letters. When I tried applying it to text starting with a symbol (☰) it didn’t work. It did work for a Chinese character though, so it’s not ASCII only. I could do with a first-char selector really.

  35. As Alan said, the first-letter selector doesn’t work so well if the first character is an opening quote (because it selects both the opening quote plus the next letter). I’m trying to replicate what my designer normally would do in print, which is to keep the initial quote small, then have a drop cap next to it. I tried using a span on the first alphabetic character, but then I get the drop-cap floating left of the opening quote, which is bad. Any suggestions?

  36. Mark
    Permalink to comment#

    Dave, if ‘symbol’ is a font, it will work like any other font. Similar to Dave’s ‘first char ignored’. Using IE11 with “details” parent and “summary” precedent sibling. Well,
    nothing happens with “first-child” pseudo. Even tried your &lt; and &gt; pipes. Nothing. However, be it noted that both summary and details elements are new to IE, and neither can directly pseudo anything, for now. Only “first-letter” works for the contained “p” element, where Ruby and HTML are copesthetic. yet some DOM tags not yet fitted… p.cap:first-letter {} and “ together, only option for now. first-child details summary

  37. Permalink to comment#

    I’m too trying to achieve this with a quote, but only want to have the starting quotation marks as the drop cap, not the first letter too. It’s working in effect but I have drop caps on the quotation marks and first letter – anyone any idea how to only drop cap the quotation marks and start the text at the top of the quotation marks not the bottom?

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".