7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 20Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Drop Caps

If you’re wondering what drop caps are, think of the older books and manuscripts which have the first letter of the chapter or the paragraph written in a much bigger font. In this lesson I’ll show you how to create them.

2.4 Drop Caps

In this lesson, I'm gonna talk about drop caps. And if you're wondering what they are, well, think of the older books and manuscripts which have the first letter of the chapter or the paragraph written in a much bigger fonts. Now there are two ways of doing this. The first one involves a bit more markup, but it's compatible with more browsers. Let's see an example. First of all, I have a simple page with three paragraphs. So, let's target this last paragraph, and we'll do span with a class of first letter. I'm going to put the first letter of the word inside that span. So right now, I'm gonna go here and I'm gonna say first letter. We'll do this, float left, and let's make it a color, like make it green. Let's increase the font, so let's do 72 pixels. On 100% line height and maybe a serif font like Georgia. All right. Let's check it out. Maybe we could use a right margin here. So let's do margin-right, or actually, let's do the short-hand notation zero, let's do about 14 pixels, 0 0. All right, so, now we have a nice margin, and that is the first way of creating a drop caps. Now the second method that relies solely on CSS to target that first letter. Let's actually target this first paragraph, and we're gonna do this. Let's do demo-container, which is the div that holds all of these paragraphs. So, demo-container paragraph, we'll do first child and then first letter, right. And that will make sure it targets the first letter from the first paragraph. Actually, this is a demo here. And basically, we'll do the same thing, float left, color green. And also the font-end margins. So, let's go ahead and copy those, paste them in, and we get the exact same result. And there you go, two very simple methods of creating drop caps. Now the last approach, the one with the first letter, is indeed more elegant. But it's not supported in older versions of Firefox. And it's also not supported in IE6 and 7. So, if you need to support those, go with the first method.

Back to the top