Inserting drop caps
Video: Inserting drop capsA 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.
- Next steps
Viewers: in countries Watching now:
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Inserting drop caps
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?
There are currently no FAQs about Typography with CSS in Dreamweaver.