:first-letter

:first-letter Pseudo-element

Applies one or more styles to the first letter of the object, with the syntax
HTML :first-letter { attribute:value } pairs

Remarks
The :first-letter pseudo-element can be used to create common typographical effects, such as drop caps - the effect obtained when the first character of a paragraph is rendered in a font larger than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

The :first-letter pseudo-element can be attached to block-level elements. It can be attached to inline elements if you set the corresponding display property to block.

The following examples show how to use the :first-letter pseudo-element.

This sRule causes the first letter in the paragraph to be a drop cap that is twice the size of the other letters in the paragraph.

<STYLE>
    P.bigFirst:first-letter 
{ font-size: 200%; float: left; color:blue }
</STYLE>

This example illustrates the cumulative effect of attaching more features to the :first-letter pseudo-element.

<STYLE>

.dropcapred:first-letter {font-size: 300%; 
	padding:10 5 5 5 ; float: left; width: 1em; 
	height: 1em; background: red; color: white;}
</STYLE>

<P CLASS="dropcapred">The first letter in this paragraph will be three the size of the other letters in the paragraph, and with a contrasting background, including padding. Subsequent lines will render normally. The first letter in this paragraph will be three the size of the other letters in the paragraph, and with a contrasting background, including padding. Subsequent lines will render normally.</P>

The first letter in this paragraph will be three times the size of the other letters in the paragraph, and with a contrasting background, including padding. Subsequent lines will render normally. The first letter in this paragraph will be three the size of the other letters in the paragraph, and with a contrasting background, including padding. Subsequent lines will render normally.

This example uses the :first-letter pseudo-element to create a typographical effect that looks like a column in a newspaper.

<STYLE>
    .col1 { border-right: black 1px solid; 
        padding-right: 10px; padding-left: 5px; 
        width: 140px; text-justify: newspaper
        }
    .newsbite:first-letter { padding-right: 5px; 
        padding-left: 5px; font-size: 24pt; 
	color:green; left: 0px; float: left; 
	padding-bottom: 5px; padding-top: 5px; 
	position: absolute; top: 100px
        }
</STYLE>

<DIV class="col1"> <DIV class="newsbite">Initial caps are a great a way to dress up your text. You can use them to draw attention to the beginning of an article. The intial caps used here are commonly called drop caps.</DIV> </DIV>

Initial caps are a great a way to dress up your text. You can use them to draw attention to the beginning of an article. The intial caps used here are commonly called drop caps.

Drop Capitals when :first-letter fails

The style declaration to simulate the unsupported pseudo-element is:
<STYLE type="text/css">
.one { font-size: 200%; font-style: italic; font-weight: bold; float: left ; color : purple}
</STYLE>

This is the first sentence of the paragraph, and is coded <P><SPAN class="one"> T</SPAN>his code snippet shows how these work for the first words of text contained in the paragraph This code snippet shows how these work. This code snippet shows how these work

Further words

Additional problems were encountered cross-browser, and it was found that the addition of a value for the width attribute was necessary to provide consistency. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

The selection of background and text color is up to the author (except in instances when the user has the option to override author colors).Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ö characters with diacritical marks are used here, to explain why the alignment of the drop cap with the text-top of the line appears to be askew (see example without background, below). Jan Roland Eriksson pointed out that the font height includes required space for diacritical marks, which explains why the apparent extra space is allowed at the top of the drop cap.