:first-letter — A Better Drop Cap
I’m not much for initial drop caps but if the design you’re building uses them, personal preference doesn’t matter. I’ve often seen drop-caps implemented by wrapping the first letter of the paragraph in a span tag and giving it a class of drop-cap or something similar. If the design changes though and doesn’t include drop-caps any longer, having all of the extra markup in your content doesn’t really make sense anymore.
A better, cleaner way to go about it is to use the pseudo elements built into CSS2. There are four useful pseudo elements, :first-line, :first-letter, :before, and :after. The before and after elements are some of my favorites but, of course, no version of Internet Explorer supports them. Amazingly enough, IE does support the first-line and first-letter pseudo elements.
Assuming you would only want a drop cap on the first paragraph, give your first paragraph a class of drop-cap, unless you want all your paragraphs to have them. Then, include the following in your CSS:
p.drop-cap:first-letter {
float: left;
font-size: 3em;
line-height: 1em;
padding-right: 0.125em;
}The first letter of this should be styled. Sed accumsan ipsum vel dui. In hac habitasse platea dictumst. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla malesuada consectetuer elit. Sed vehicula semper arcu.
