Adding drop caps to the beginning of a paragraph, as I did with my latest redesign, is actually a pretty simple and straight-forward process. The effect can be achieved with just a couple of lines of CSS making use of two special ‘pseudo-elements’.

This effect should work in most browsers (yes, even Internet Explorer, according to MSDN both ‘elements’ should work in IE5.5+), the only real variation may be which font is displayed for the drop cap, and the way the specific browser interprets ‘em’ font-sizes. Alternatively pixel sizes could be used for the drop cap font, which should allow you to get greater consistency between browsers.

As mentioned we’re going to use two pseudo-elements as outlined in the CSS2 specification, the two ‘elements’ in question are :first-line and :first-letter. If you’re curious and want to know more about these ‘elements’ or the concept of ‘pseudo-elements’ feel free to follow the links and have a read of the specification, its not necessary for the purposes of this brief how-to, but some people are into that sort of thing.

Ok, let’s start. First off we’ll need to set up the default paragraph style before we do anything else. Nothing very complex here, just a few basic styles to set size, style, alignment etc.

.excerpt p {
	text-align:justify;
	margin-top:2em;
	font-size:1.2em;
	font-style:italic;
	color:#666;
}

Next up is the style for the :first-letter, as you would probably be expecting this style will apply only to the first letter of the paragraph in question. You can do pretty much whatever you want to the style, in this case we’re making the font larger, bold, changing the font and adding a little margin around the drop cap.

The only important bits that need to be set are:

• float:left; - this allows the rest of the paragraph to wrap around the drop cap.
• line-height:0.75em; - I played with a few values here, but this seemed to work best for the font family I’m working with, changing this value will affect the way that your drop cap lines up with the rest of your paragraph.

Remember its all personal preference, play around with sizes, fonts, margins etc until you are happy with the look.

.excerpt p:first-letter {
	font-size:6em;
	line-height:0.75em;
	float:left;
	margin-right:0.1em;
	font-family:"Warnock Pro", "Baskerville", "Goudy Old Style","Palatino","Book Antiqua",serif;
	font-weight:bold;
	font-style:normal;
}

Now you can also setup a separate style for the :first-line, and yep, you guessed it, it only affects the first line of your paragraph. Again, like before, you can change whatever characteristics you like, I’ve made it uppercase and increased the font-size slightly.

Nothing complex about this, just style it like you would any other paragraph. As far as the style goes, you could go completely nuts and make the test italics, purple, with a lime green dotted underline… but, well, I’d probably suggest thats taking things too far.

.excerpt p:first-line {
	text-transform:uppercase;
	font-size:1.3em;
	line-height:1em;
	font-style:normal;
}

There you go, simple as that, now you’ve got awesome drop caps too. Experiment with different combinations, maybe just use the drop cap, or maybe just use the first line style. You could change the colour to white and give the drop cap a background colour for an inverted look, go nuts.