1001 Mark Boulevard St.

Mon - Sat 8.00 - 18.00

Sales department

CSS Drop Cap

Here’s a couple of ways to create that cool looking extra large first letter of a paragraph using two different methods but both using CSS. You can do these either in line CSS or external CSS as an attached stylesheet.

The <span> Method

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

]

.firstletter{

display:block;

float:left;

margin:-0.63em0.5em0-0.56em;

height:4.5em;

color:#aaa;

}

.firstletter span{

font-size:200%;

line-height:1.0em;

}

.firstletter+span{

margin-left:-0.5em;

}

Using this in the HTML as follows:

1

2

3

4

5

6

"]

&lt;span&gt;

&lt;span&gt;W&lt;/span&gt;

&lt;/span&gt;hen was the first time drop caps first letter introduced innewspaper,magazine?

But its beenaquite whilethe trend of drop cap used inweb business.First letter drop

cap can be achieved inmany ways.

The Pseudo Element Method

1

2

3

4

5

6

7

8

9

"]

p:first-letter{

font-size:400%;

display:block;

float:left;

margin:0.06em00;

height:3.5em;

color:#ccc;

}

This uses the little known :first-letter pseudo element that formats the first letter
of the paragraph. Here’s how to apply the HTML:
<p>Type your sentence here and the first letter will be larger</p>
Drop caps add some style to otherwise bland pages if done right.

LATEST POSTS

Lately i've been using Divi for the majority of my projects since it's such a great theme for adapting to any type of business or service. And, my clients like the drag 'n drop interface which, oddly, is easier to teach to someone than the standard Wordpress editor...