CSS Drop Caps

Drop caps — where the first letter of a paragraph is larger than the rest — can be accomplished with the CSS first-letter selector i.e. pseudo-element. To set a drop – cap, you have to write your code in a <style></style> element on the top of the page.

CSS

p.introduction:first-letter{

  font-size : 250%;

  font-weight : bold;

  float : left;

  width : 1em;

Then paste this code into <body> tag of your document:

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

But if your browser does not support pseudo - class or pseudo element, not to worry, we have the solution of this problem. Solution is –

Use <span> tag around the first letter in the paragraph. For example:
<span style="font-size : 150%; font-weight : bold; float : left; width : .80em;">

Try pasting the following into your HTML editor:

This 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.