CSS :first-letter

The CSS :first-letter pseudo-element is used to style the first letter of the first line of a block-level element, such as a paragraph. This is commonly used to create decorative effects like drop caps or to emphasize the first letter of a section.

The syntax for the :first-letter pseudo-element is:

</>
Copy
selector:first-letter {
    property: value;
}

Where:

ParameterDescription
selectorThe block-level element (e.g., <p>, <div>) to which the :first-letter pseudo-element will apply.
propertyThe CSS property to style the first letter.
valueThe value assigned to the CSS property.

Examples

1. Styling the First Letter with Font Size

In this example, the first letter of each paragraph is styled with a larger font size and bold text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-letter {
            font-size: 2em;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</body>
</html>

2. Applying a Drop Cap Effect

Here, the first letter of paragraphs is styled with a larger font size and floated to create a drop cap effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-letter {
            font-size: 3em;
            font-weight: bold;
            float: left;
            margin-right: 10px;
            line-height: 1;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</body>
</html>

3. Changing the Color of the First Letter

In this example, the first letter of each paragraph is styled with a red color.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-letter {
            color: red;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed cursus turpis vitae tortor.</p>
</body>
</html>

4. Styling the First Letter with Text Transform

Here, the first letter is styled with uppercase transformation and a different font family.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-letter {
            text-transform: uppercase;
            font-family: "Courier New", Courier, monospace;
        }
    </style>
</head>
<body>
    <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</body>
</html>

5. Combining Multiple Styles on the First Letter

In this example, the first letter is styled with a combination of font size, color, and text-shadow.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:first-letter {
            font-size: 2.5em;
            color: navy;
            text-shadow: 1px 1px 2px gray;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed cursus turpis vitae tortor.</p>
</body>
</html>