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; }
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.
The CSS 2.1 specification for the :first-letter
pseudo-element at http://www.w3.org/TR/CSS21/selector.html#x52;
for more information on initial caps in general, see http://fonts.lordkyl.net/fonts.php?category=vers.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.