Recipe 1.4 Setting a Simple Initial Cap

‚ < ‚ Day Day Up ‚ > ‚

Problem

You want a paragraph to begin with an initial cap.

Solution

Mark up the paragraph of content with a p element:

 <p>Online, activity of exchanging ideas is sped up. The  distribution of messages from the sellin of propaganda to the  giving away of disinformation takes place at a blindingly fast  pace thanks to the state of technology...</p>

Use the pseudo-element :first-letter to stylize the first letter of the paragraph, as shown in Figure 1-7:

 p:first-letter {  font-size: 1.2em;  background-color: black;  color: white; }

Figure 1-7. A simple initial cap

Discussion

The CSS specification offers an easy way to stylize the first letter in a paragraph as a traditional initial or drop cap: use the :first-letter pseudo-element ( :first-letter isn't supported in most browsers, including Internet Explorer 4 and 5 for Windows, Netscape Navigator 4, and Internet Explorer 4.5 for Macintosh).

Wrap a span element with a class attribute 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>

Then set the style for the initial cap:

 p .initcap {  font-size: 1.2em;  background-color: black;  color: white;  }

Initial caps, also known as versals , traditionally are enlarged in print to anything from a few points to three lines of text.

Problem

Solution

Figure 1-7. A simple initial cap

Discussion

See Also