Creating a “Drop-Cap” with CSS

There are allot of magazine style sites out there that use “drop-caps” It is a kind-of old style of writing, but it does give magazine style sites a nice touch.

Below is the HTML and CSS code to make the first letter in a paragraph a “drop-cap”

First let’s start with the CSS bit. Add the following lines to your preferred style sheet.

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

Now the HTML Bit.

 This paragraph has the class "introduction". However in order for this to fully work your browser has to support the pseudo class "first-letter", the first letter will then be a drop-cap.

And the result is: