:first-letter Pseudo-element | Internet Development Index |
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>
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
See Also
:first-line