Subtitles of the Movie

In this movie, I review how to create drop caps using CSS. Drop caps may be familiar to you as those really interesting illustrated bibles. Old bibles have the first letter of the paragraph in that interesting typeface and decorative font. But this is a device that's been used in probably every magazine and newspaper since mass publishing began. Here's some examples of different drop caps. This technique, notice, sees the first letter of a paragraph singled out and treated differently than the text of the rest of the paragraph. It's typically larger, different color, maybe a different typeface as well. The drop cap may also be boxed inside of its own container is another style of using the drop cap I'm using as an example here of that style. Now, creating a drop cap requires no extra mark up in the HTML, although to avoid applying this method to every paragraph, you'll probably want to use it as a class as I did previously and that way you can specify which paragraphs will have the drop cap. Typically only the first paragraph of a section will have a drop cap. So back here in Dreamweaver let's open up my CSS window and create a new class. And let's call this .DropCap; stands for drop capitalization I guess, shorthand. Let's do it in this document only, although I could easily add this to a style sheet if I needed to. Click OK and what we'll do here is we'll change the typeface. Let's go with Geneva. Let's go with 36 point, bold on the weight and let's just for demonstration purposes, let's do this as italic, click OK. Now all we need to do to do a simple drop cap is highlight that L right there and then right click or Control click if you're on the Mac to open up the contextual menu and select the Apply option there and that will apply that drop cap to just that letter. I should say that drop cap class to the letter. Now, in addition to these basic settings such as font and size and weight, there are some additional properties you'll want to establish to help you create more effective drop caps. Notice that on the size, for example, it stops at 36 but you can type in any number that you want there. So let's set our size to 60 pixels, our line height to 50 pixels and then let's go over to the box here and let's set a width to give plenty of width for that. Let's go 40 pixels and then there's a setting called float, which I'll talk about later. Let's set the float to left. This will be declared to ensure that the remaining paragraph text floats around the enlarged drop cap. But again, more about floats later. The width is defined to ensure the drop cap has enough space in which to sit and obviously the font size is increased to significantly enlarge that type. I could also change the color and let's go ahead and click OK and now let's highlight our first letter there. Right click or Control click if you have the Mac on the style and click Apply and then notice that looks a little bit better there. Gives plenty of space, it's larger, the color is different. You may find that you'll need to adjust the width and the font size depending on the actual font that you use. Some fonts and some typefaces will require a little more space or perhaps a little less space. So there you have an example of how to create a drop cap using a variety of style properties that I've covered previously. So that'll wrap up this very important section of this tutorial on formatting text. In this section you learned why text formatting is important, how to choose fonts, all about web-safe fonts, font sizes, how to apply styles to text, how to set line height and letter spacing, as well as other font properties, including things such as styles, weights and variants. Then you received some tips for improving text legibility including using block quotes, indenting paragraphs and applying drop caps.