CSS Drop caps are a way to style the first letter or first word in a document or at the beginning of a major section of a document. There are a few ways to make drop caps by styling paragraphs and text, and this blog entry will walk through how to use the first-letter pseudo class and how to make hanging drop caps. My next blog entry will cover floating and marginal drop caps.
Hanging drop caps have two basic styles: 1) a hanging indent with settings to accommodate the height, width, and final position of the drop cap, and 2) a relatively positioned drop cap with settings to specify exactly where it sits within the hanging indent.
The drop cap H is relatively positioned because you want it to keep its position in the normal flow of elements on the page, but be able to control its horizontal and vertical placement without affecting the placement of the paragraph. Below are the style settings for the drop cap.
*.hangindent{padding-left:30px; text-indent:-30px; margin-top:-25px;} *.dropcap{position:relative; top:21px; left:-2px; font-size:30pt; line-height:35px; font-weight:bold; color:#8b0000;}