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