:first-letter Pseudo-element

Applies one or more styles to the first letter of the object.

Syntax

HTML :first-letter { sRules }
Scripting N/A

Possible Values

sRules Value that specifies one or more Cascading Style Sheets (CSS) attribute/value pairs.

Remarks

The background, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, color, styleFloat, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, margin, padding, textDecoration, textTransform, and verticalAlign properties apply to the :first-letter pseudo-element.
The :first-letter pseudo-element can be used to create common typographical effects, such as drop caps. Drop caps is 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.

Examples

The following examples show how to use the :first-letter pseudo-element.
The following rule 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 }
</STYLE>
<P CLASS="BigFirst">The first letter in this paragraph will be
twice the size of the other letters in this paragraph.  The first
letter in this paragraph will be twice the size of the other
letters in this paragraph.</P>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following rules illustrate the cumulative effect of attaching :first-line and :first-letter pseudo-elements to an element.
<STYLE>
.LetterAndLine:first-line   { text-transform: uppercase }
.LetterAndLine:first-letter { font-size: 200%; float: left }
</STYLE>
<P CLASS="LetterAndLine">The first letter in this paragraph will
be twice the size of the other letters in the paragraph.  The
first line in this paragraph will have uppercase letters.
Subsequent lines will render normally.  The first letter in this
paragraph will be twice the size of the other letters in the
paragraph.  The first line in this paragraph will have uppercase
letters.  Subsequent lines will render normally.</P>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following 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;
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 initial caps used here are commonly called drop
caps.</DIV>
</DIV>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This pseudo-element is defined in CSS, Level 1 (CSS1) .

Applies To

ADDRESS, BLOCKQUOTE, BODY, CENTER, DD, DIV, DL, DT, FIELDSET, FORM, hn, LEGEND, LI, LISTING, MARQUEE, MENU, P, PLAINTEXT, PRE, XMP