CSS ::first-letter

The ::first-letter pseudo-element in CSS is a powerful way to style the first letter of a block element. This can be especially useful in applications like creating drop caps in a paragraph of text. In this tutorial, we will explore how to use the ::first-letter pseudo-element with some examples.

Basic Syntax

The syntax for using ::first-letter is straightforward. Here is an example:


p::first-letter {
    font-size: 250%;
    font-weight: bold;
    color: #3A5E9A;
}

This code snippet styles the first letter of any <p> element by increasing its font size, making it bold, and changing its color.

Result:

Hello, this is an example of the ::first-letter styling. The first letter is larger, bolder, and colored differently to stand out.

Example with Multiple Styles

You can also apply multiple styles to the first letter. For example:


h1::first-letter {
    font-size: 300%;
    font-weight: bold;
    color: orange;
    float: left;
    margin-right: 10px;
}

This example shows how the first letter of an <h1> element can be styled to float to the left with additional formatting.

Result:

Welcome to the world of CSS! The first letter stands out beautifully.

Advanced Use Case: Combining with Other Properties

We can combine the ::first-letter with other CSS properties to create more advanced effects. Here's how:


blockquote::first-letter {
    font-size: 200%;
    font-family: 'Georgia', serif;
    color: #6A5ACD;
    text-shadow: 1px 1px 2px #000;
}

In this example, the first letter in a <blockquote> element is styled with a different font family, a text shadow, and color.

Result:

Beautiful design is the key to a successful user experience.

Conclusion

The ::first-letter pseudo-element is a versatile tool that can greatly enhance the visual appeal of your text. By experimenting with different styles, you can create unique typographic designs that draw attention to the first letter of your content.