Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

:first-letter

Expression Studio 3.0

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

:first-letter { sRules }

sRules

Value that specifies one or more cascading style sheet attribute/value pairs.

The background, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, clear, color, font, font-family, font-size, font-style, font-variant, font-weight, line-height, margin, padding, text-decoration, and vertical-align 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 are the effect created 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.

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>

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>

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>

ADDRESS, BLOCKQUOTE, BODY, CENTER, DD, DIV, DL, DT, FIELDSET, FORM, HN, LI, P, XMP

Community Additions

ADD
Show:
© 2015 Microsoft