Learn How To Create Drop Cap Letters In CSS

In the tutorial today we are going to learn how we can use just CSS to create an old newspaper technique of making the first letter of a paragraph capital and drop into the paragraph.

#Old Way To Handle With CSS

You could always do this with CSS but you had to use a span tag on the first letter.

<p><span>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo. Donec nibh lectus, vulputate a aliquet quis, sollicitudin eget metus. Nullam quis tellus nibh. Praesent fermentum risus sit amet turpis eleifend dapibus. Duis tellus leo, tempor sit amet ultricies viverra, mollis at quam. Suspendisse hendrerit sagittis risus nec faucibus. Nam urna magna, porta vitae tincidunt sit amet, blandit eget diam. Vivamus a ornare augue. Vivamus sapien sem, facilisis vitae molestie eget, tempus ut augue. Sed suscipit facilisis mi, eu laoreet est gravida eu. Nulla et arcu quam, pellentesque adipiscing felis. Nam pretium augue sed sapien malesuada tempor. Nulla facilisi. Donec eu tempor mi. Sed congue dolor risus, et ornare massa.</p>

Then you have to add a style to the span tag to create the drop capital.

 
p + span {
        display:block;
	float:left;
	font-family:Georgia;
	font-size: 310%;
	font-weight: bold;
	line-height: 90%;
	margin-right: 6px;
	margin-bottom:-2px;
	margin-top: 7px;
}

The problem with this technique is that you have to remember to add a span around the paragraph each time you want to create the drop capitals, in a CMS system when the user might not understand HTML then you won't be able to add a span tag. The way around this is to use CSS3 new property :first-letter.

#CSS First Letter

CSS allows you to add a property :first-letter which as you can guess allows you to style the first letter of the element. Therefore you can add this to all paragraph to create drop capitals on all paragraphs.

p:first-letter {
	display:block;
	float:left;
	font-family:Georgia;
	font-size: 310%;
	font-weight: bold;
	line-height: 90%;
	margin-right: 6px;
	margin-bottom:-2px;
	margin-top: 7px;
}