Adding Drop Caps .......................................................................................
You can apply this same offsetting principle I discussed in the last section to
text in various ways. One way is to add an icon — like this watch graphic per-
haps — to the side of each of your paragraphs. Flow the paragraphs around
the image, or use an enlarged overlapping capital letter at the start of a para-
graph. This technique, called a drop cap, has been used for centuries as a
way of adding variety to pages of text.
Figure 8-7 was created using the following technique. Define a class that spec-
ifies a font that’s larger than its parent element, that floats to the left of its
parent, and, if you wish, give it a different color as well. (In this code, I made
the drop cap bold and 400 percent larger than the surrounding paragraph
text.) Then use a <span>element to add the drop cap to the paragraph:
<html>
<head>
<style>
p {font-size:32px;}
.dropcap {font:bold 400%; float:left; color:GreenYellow;}
</style>
</head>
<body>
Figure 8-6:
This partial
silhouetting
pulls the
watch right
out of the
screen and
pulls the
reader’s eye
right into
your page.
160 Part III: Adding Artistry: Design and Composition with CSS
