CSS Drop Caps Tutorial
Drop caps are used in web typography to improve the visual look of a website. In modern society, they are used as a text decoration to break up square looking text and make the content more engaging for the reader. It is possible to make dropcaps with a little CSS and the drop cap html is minimal.
In fact, if you are using Dreamweaver, you only need to put the letter you want to make into a drop cap into a paragraph tag. Once you have created the CSS drop caps class, you can attach that class to the letter from a drop down box in the properties inspector which will apply a span tag for you.
Assuming you have a paragraph set up, let’s first create the css for the drop cap.
1. Create the CSS for the drop caps to work
The most important aspect of the css dropcap is that a float property is applied to the class which when applied to the letter in question will make all of the text around it in the paragraph collapse. Once the rest of the paragraph has collapsed the css is set to push away from the drop cap with padding. The font size is set to a large typeface and a line height is set which is greater than the size of the letter to push the content away at the bottom.
You may want to push the css drop cap down from the top a little with a padding top attribute as well like in the following example drop caps css:
.dropcap { float:left; color: #09F; font-size:63px; line-height:55px; padding-right:25px; padding-top:2px; font-family:Arial, Helvetica, sans-serif; text-shadow:1px 1px 1px #000; }
In the example, the font family was also set for the drop cap as well as a text shadow.
2. Apply the Span Class for the CSS Drop Cap
If you are using Dreamweaver, you may at this point highlight the letter with your mouse and look to the properties inspector and change the class from the drop down class selector.
If you instead want to know how to hand-code the drop cap html span tag, you will need to type the following code to wrap around the intended drop cap letter:
<span class="dropcap"> D </span> <!-- If you pasted the above CSS called 'dropcap',then the span class will be called dropcap too. -->
That completes this tutorial on css drop caps and the minimal drop cap html needed to create one.
Related Tutorials:
CSS Drop Caps - Video Tutorial
Typography in Web Design - Video Tutorial