A "drop cap" is one of the more exotic pyrotechnics in the typesetter's aresenal. You often see it in highbrow magazines like the New Yorker where the first letter of an article is oversized, or boxed, or surrounded by a design. It's simply a way to start an article out with a flourish. In the old days, they simply put in a block for the big initial and arranged the other letters around it.
But working in HTML, I found it wasn't simple at all. If you just specify the font of the first letter as "font-size: x-large;", it will render larger, but it won't "drop down" into the lines of text as it's supposed to.
Lorem ipsum quia dolor sit amet
After some poking around on the Internets, I found a way to do it using JavaScript. At first I thought it was too much coding for what you got out of it--but then, so is pretty much any coding on a sophisticated web page. In the final analysis, yes, it's a stupid JavaScript trick to fancy up your blog postings, but it's also a fairly simple, elegant example of using a JavaScript class, which defines a CSS style, and is located in the head of the web page.
This is the JavaScript I'm currently using:
<style type="text/css">
.dropcap { font-family: "Book Antiqua", serif; font-size: 3em; float: left; border: 1px double #000000; padding: 10px; margin: 0 5 0 0; }
</style>
<span class="dropcap">L</span><span style="font-family: "Trebuchet MS", sans-serif;">orem ipsum quia dolor sit amet<span>
It renders as follows:
Lorem ipsum quia dolor sit amet
