How to make the first letter in a paragraph drop (initial, drop cap)

[egturnkey]

Hello Friends,
Sorry i didn't know how to explain more in the title.
Anyway here is an image show what i ment



http://www.picamatic.com/show/2009/05/04/05/53/3511634_325x128.JPG


As you can see the 1st letter ( it isn't image, it is text ) is big just like news aricles, so how can i make it like this .

thanks in advance

[Snookerman]

That is called an initial (http://en.wikipedia.org/wiki/Initial). There are different types of initials and the one that you have in your picture is called a drop cap or drop initial. The most common way to achieve a drop cap in web design is to wrap the first letter of the text with a span:

<p><span class="drop">S</span>nookerman is awesome! Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra.</p>
Then you float the span and change the font-size, line-height and position:

span.drop {
float: left;
font-size: 4em;
line-height: 0.7;
}
This takes some testing, so play around with the position, the margins and the padding until you are happy with the result.

Good luck!