The Accessible Way
Your best bet is to watch Ethan’s 5-minute video and then reference this:
The 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.
</p>.firstcharacter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}The 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>
Just a normal sentence.
</p>p:first-child:first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}The initial-letter way
The browser support for initial-letter is pretty sparse at the time of this writing, but it can be used to calculate the number of lines the drop capped letter should occupy and the font size instead of doing that on your own.
p:first-child:first-letter {
color: #903;
font-family: Georgia;
initial-letter: 2;
}Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 126 | No | No | 123 | TP* |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 123 | No | 123 | 17.5* |
That’s a really nice funcionality, didn’t really know about the “first-letter”. Thanks for the tip!
Actually it kind of works in ie8. If the paragraph has nothing before it ( etc) then it will work…
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!
small but nice
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.
This is awesome ! nice tips mate :)
Excellent snippet — I was having cross-browser issues with :first-letter, the span solution left me spic-n-pixel-perfect. Thanks!
Thank you very much for this tip.
This doesn’t seem to work.
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.
This steps helped me. Thanks for the tutorial :)
Thank you! It works!
BTW: are there any fonts that look particularly well and could be recommended to use in drop caps (apart from Georgia)?
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;}
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.
.. great trick, it is so useful, thanks!.
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
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.
Does this trick is usable in the wordpress theme?
I’m almost certain that
p:first-child:first-letterdoesn’t work in any browser. At least, it’s not working for me in Chrome 18, Safari 5.2, Firefox 11, Opera 11.Dan, it should be written like the following
p:first-child::first-letter
You were missing a colon.
Instead of
:first-childyou need to use:first-of-type.Otherwise the “first child” could be a<h1>for example.I think
.class>p:first-child:first-letteris batter way.Thank you Markus! I’ve been smashing my head against the keyboard and “:first-of-type” finally did the trick!
I’m using
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:
Thanks
t
@ 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 ;)
@ 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 ;)
what is font you using in?
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!
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
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.
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:
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:
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
Sharing is caring, thanks (:
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
We used some jQuery in order to implement the CSS3 version across all browsers Sample Link
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.
Works well, unless you start the paragraph with quotes. :D (scrsht http://i.sqr.fr/SmMS )
Used responsive units for 16px base font size:
It will only work, if there is not any element before it. The p tag should be the very first element of your html.
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.
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.
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?
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
<and>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 summaryI’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?
Wouldn’t the CSS function:
text-transform: capitalize;
Work just as good to capitalize the first letter?
“Dan, it should be written like the following
p:first-child::first-letter
You were missing a colon.”
That sounds like an unpleasant condition.
Nice Article. Overall good amount of valuable formation in the website for designers and developers.
What if I only want to apply the drop cap to my blog pages, but it’s formatting it across the whole website? Ie. in my summary block, on my photo descriptions, etc. Any way to restrict it? I’m using squarespace by the way so I can only use CSS edits. Thanks!
Is it possible to implement with just Flexbox?
Is it possible to do something like a
float: leftbut withhtml{text-align: center;}?