CSS Drop Caps

A Simple Way to Create Drop Caps with CSS

Use the first-letter Pseudo-Class

The easiest way to create CSS Drop Caps is to use the first-letter pseudo-element on the element you want to have a drop cap. The problem is, this isn't supported in all browsers. Be sure to test this in the browsers your Web site supports.

Type the following and place it in a <style></style> element at the top of your Web page:

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

Then paste this into the body of your document:

<p class="introduction"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>

See what it looks like.

Fake CSS Drop Caps In Older Browsers

If the browser you're writing for doesn't support the first-letter pseudo-class, you can still create a CSS drop cap. Just use a <span> tag around the first letter in the element you want to have a drop cap.

Type the following into a <style></style> element at the top of your Web page:

p.intro .firstletter {
font-size : 300%;
font-weight : bold;
float : left;
color : #c00;
}

Then put your paragraph up, with the first letter surrounded by span tags.

<p class="intro">
<span class="firstletter">T</span>his paragraph has a drop-cap on the first character that should be visible to browsers like Internet Explorer 4 and 5. It will work in Netscape 4 as well, but you need to play around with the width of your letter to find the right size. <br clear="all" />
</p>

See what it looks like.