Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A drop cap is an enlarged first letter of the first word of a paragraph, typically set so that the other letters of the paragraph flow around it. There are a couple of CSS techniques for creating a drop cap, but hands down, the easiest and cleanest one from a code perspective uses the first letter pseudo-class. Let me show you how it works. Now, I have the tours.htm file from Chapter 5 > 05_07 open. We're in Live View. Let's go down to the tour descriptions.
I want to scroll down just enough there so I can see the first one, and still have my blue color here available, because I will be sampling that as part of the drop cap creation. I'll put my cursor into that first line which has been styled already with a first line pseudo-class and click New CSS Rule. Now I'm going to make my Selector a little less specific, and then add in the pseudo-class which you do by starting off with a colon, and typing in first-letter.
Click OK. Now we want to do a fair amount of things here. We'll start off in the Type category, and let's give it the same color as the first line. So I'm going to click on the color swatch, and then with my Eyedropper tool go up and sample the blue that we see there. Now I want to enlarge the first letter so that it's a suitable drop cap. So let's go to Font-size and I'm going to make this 3 ems. I want to show you a small trick that you can apply throughout the CSS Rule Definition dialog box.
Instead of typing in the value and then choosing ems or whatever the measurement unit that you want from the measurement unit dropdown list, you can actually type them all together. So if I type in 3 em and then press Tab, the measurement unit dropdown list will make the proper selection. You can use the same thing if you're doing percentages, and the percent symbol will be selected. Very handy! So let's go to Line-height. In order to bring the drop cap into alignment, I need to specify a very small Line-height value of .05 ems.
So I'll use my trick again and you can see with a Tab, it shows up as ems. Now we need to switch over to the Box category and I want to take advantage of the Float property in CSS, so I can move the character over to the left, and have the rest of the text wrapped around it. To do that, we go to Float, and then choose Left. Two more values to go. Those are going to be the Margin Top, and to get to that I'll have to deselect Same for all under Margin, Same for all under Margin, and we want to add a little bit of margin at the Top to bring it down so that it is in a line with the text.
This will be 0.5 em value. And a little padding on the right, just to separate the drop-cap from the rest of the letters a slight amount. So I'm going to go in and put it as 0.1 ems. Okay, let's take a look by clicking OK, and there you can see my E is enlarged in Explore, and is pretty much in line with the rest of the text there. Now I'll bring it down so I can show you that the drop-caps have been applied to the other tour descriptions as well.
So in this example we've combined the power of both first letter and first line to really make our paragraphs pop. Pretty cool drop-cap, don't you think?
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66123 Viewers
61 Video lessons · 96686 Viewers
56 Video lessons · 110399 Viewers
82 Video lessons · 105144 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.