The following tutorial was submitted to Scriptplayground from pneal

Lets start off with the HTML used in this example, this is just basic code not much to explain. :)

<p class="dropcap">Epsum factorial non deposit quid pro quo hic escorol. 
Olypian quarrels et gorilla congolium sic ad nauseum. 
Souvlaki ignitus carborundum e pluribus unum. 
Defacto lingo est igpay atinlay. Marquee selec</p>

Now we get to the CSS all commented for you viewing pleasure.

p.dropcap:first-letter {
	float: left; /* Make the text flow around the letter */
	font-family: Times, Times New Roman, Serif; /* Use whatever font fits your site */
	color: #00FF00; /* Color of the font */
	font-size: 2em; /* Makes the letter twice the size of the rest of the text */
	font-weight: bold; /* Don't need it, but looks good */
	line-height: 1em; /* Adjustment for IE. Otherwise it doesn't line up correctly */
	padding-right: 0.15em; /* If it's getting crowded - adjust */
}

That is all it takes to create really cool Drop Caps for your site.

This effect has been tested in the following browsers

• Mozilla
• Firefox
• Opera
• IE 6
• NS 7, 8

It has not been tested on the Macintosh platform so if you use that please comment on the results. :)