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 : 
 }

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 : 
 }

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

p class="intro"
 span class="firstletter"T/spanhis 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.

Subscribe
%d bloggers like this: