CSS Cookbook

1.6. Setting an Initial Cap with Decoration (Imagery)

Problem

You want to use an image for an initial cap.

Solution

Wrap a span element around the first letter of the first sentence of the first paragraph:

<p><span class="initcap">O</span>nline, activity of exchanging 
ideas is sped up. The distribution of messages from the selling of
propaganda to the giving away of disinformation takes place at a 
blindingly fast pace thanks to the state of technology...</p>

Set the contents inside the span to be hidden:

p.initcap {
 display: none;
}

Then set an image to be used as the initial cap in the background of the paragraph (see Figure 1-11):

p {
 line-height: 1em;
 background-image: url(initcap-o.gif);
 background-repeat: no-repeat;
 text-indent: 35px;
 padding-top: 45px;
}

Figure 1-11. An image used as an initial cap

Discussion

The first step of this Solution is to create an image for use as the initial cap. Once you have created the image, make a note of its width and height. In this example, the image of the letter measures 55 by 58 pixels (see Figure 1-12).

Figure 1-12. The image of the initial cap

Next, hide the first letter of the HTML text by setting the display property to none. Then put the image in the background of the paragraph, making sure that the image doesn’t repeat by setting the value of ...