Setting a Simple Initial Cap






Setting a Simple Initial Cap

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 &hellip;</p>

Use the pseudo-element :first-letter to stylize the first letter of the paragraph (see Figure):

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

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 is supported in common modern browsers such as Internet Explorer 6 for Windows, Firefox, Safari, and Opera. For other browsers, a different approach may be needed.

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 &hellip;</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.

See Also

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.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows