<p><span class=”dropcap”>N</span>otice that the graphic in
Figure 7-21 is not precisely 40% over from the
left and 60% down from the top. That’s because the
top-left of the graphic is not the positioning
point. Instead, the point is inside the graphic at
its 40/60 coordinate. Absolute positioning units
(inches, px, and so on) can also be used to
position a background graphic, using the usual
</p></body>
</html>An easier way to add a drop cap to every paragraph is to use a pseudo-element.
Pseudo-elements are explored further in Chapter 15. Here’s a preview, as
shown in Figure 8-8:<html>
<head><style>
p {font-size:24px;}
p:first-letter {font:bold 300%; float:left;
color:GreenYellow;}
</style></head>Figure 8-7:
Drop-caps
add variety
by violating
the space of
the parent
paragraph.