Drop-caps Using Css

How can I make the first character of each paragraph look like this: I'd prefer using CSS only.

Solution 1:

p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
}

Tweak the font, padding, line-height as needed.

Example: http://jsfiddle.net/RLdw2/

Solution 2:

add this p:first-letter{font-size:50px}

DEMO

---

Here is the exact solution for your requirement shown in the image

DEMO 2

WIKIPEDIA EXPLANATION

Solution 3:

see DEMO here... CSS///

p{ width:300px; border:1px solid #000;}
p:first-letter
{font-size:52px;color:#8A2BE2;font-weight:bold;float: left;margin-top:4px;}

HTML///

<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>


<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>