CSS Drop Cap

SimcoMedia Design — Tue, 02 Jun 2009 03:45:50 +0000

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 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:


W
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:

Type your sentence here and the first letter will be larger

Drop caps add some style to otherwise bland pages if done right.

Share on Facebook

SimcoMedia Professional Web Design » CSS Drop Cap

CSS Drop Cap