CSS Drop Cap

by | Jun 1, 2009 | CSS, Tutorials

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

.firstletter {
display:block;
float:left;
margin: -0.63em 0.5em 0 -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:

<span>
<span>W</span>
</span>hen was the first time drop caps first letter introduced in newspaper, magazine?
But its been a quite while the trend of drop cap used in web business. First letter drop
cap can be achieved in many ways.

The Pseudo Element Method

p:first-letter {
font-size:400%;
display:block;
float:left;
margin: 0.06em 0 0;
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.

0 Comments

Pin It on Pinterest

Share This