CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!

Example 1-5. Marginal Graphic Dropcap

HTML

Marginal Graphic Dropcap

Marginal
Graphic Dropcap. The letter M has been covered by the dropcap image.
Screen readers read the text and visual users see the image.
If the browser cannot display the dropcap image,
the text becomes visible.

CSS

*.indent { position:relative; margin-left:120px; }

*.graphic-dropcap { position:absolute;
width:120px; height:90px; left:-120px; top:0; }

*.graphic-dropcap span { position:absolute;
width:120px; height:90px; margin:0; left:0; top:0;
background:url("m.jpg") no-repeat; }

Using Style Sheets

You can place styles in three locations: style sheets,