The ::first-letter pseudo-element in CSS is used to apply styles to the very first letter of the first line of a block-level element. This is perfect for creating drop caps and other typographic effects to enhance readability and visual interest in your text. Only a specific subset of CSS properties can be used with this pseudo-element.
Example 1: Basic Drop Cap
/* CSS */
p::first-letter {
font-size: 3em; /* Makes the first letter three times larger */
color: #2a6496; /* Sets a distinct blue color */
font-weight: bold; /* Makes the letter bold */
float: left; /* Allows text to wrap around the letter */
margin-right: 0.1em; /* Adds space to the right of the letter */
line-height: 1; /* Adjusts the line height for proper alignment */
}
Explanation This code targets the first letter of any paragraph (<p>) element. It creates a classic "drop cap" effect by increasing the font size, changing the color, and using float: left to position it within the flow of the text.
Example 2: Styling with Background and Padding
/* CSS */
article::first-letter {
background-color: #f0ad4e; /* Adds a yellow background */
color: white; /* Sets the letter color to white */
padding: 0.2em; /* Adds padding around the letter */
border-radius: 5px; /* Rounds the corners of the background */
font-family: 'Georgia', serif; /* Uses a serif font for a classic look */
}
Explanation Here, the first letter of an <article> is styled with a background color and padding. This technique makes the initial letter stand out as if it were an illuminated manuscript letter.
Example 3: Targeting a Specific Class
/* CSS */
.intro::first-letter {
font-size: 250%; /* Increases font size by 250% */
color: #d9534f; /* Applies a red color */
font-style: italic; /* Makes the letter italic */
}
Explanation This example demonstrates how to apply the ::first-letter style only to elements with a specific class, in this case, .intro. This allows for more targeted and controlled styling within your document.
Example 4: Using a Different Font Family
/* CSS */
h2::first-letter {
font-family: 'Playfair Display', serif; /* Uses an elegant display font */
font-size: 1.5em; /* A subtle size increase */
color: darkslateGray; /* A sophisticated, dark color */
}
Explanation This CSS targets the first letter of <h2> headings. It applies a different, more decorative font family to create a stylish typographic hierarchy.
Example 5: Combining with Text Shadow
/* CSS */
blockquote::first-letter {
font-size: 4rem; /* A large font size */
color: #333; /* A dark grey color */
text-shadow: 2px 2px 3px #aaa; /* Adds a subtle shadow for depth */
float: left;
margin: 0 0.2em 0 0;
}
Explanation This code styles the first letter of a <blockquote>. A text-shadow is added to give the large initial letter a sense of depth and make it pop off the page.
Example 6: Removing Bold from Headers
/* CSS */
h1::first-letter {
font-weight: normal; /* Overrides the default bold of the h1 */
color: #5cb85c; /* A green color */
margin-right: 4px; /* Adds a small margin */
}
Explanation Sometimes, you might want the first letter to be styled differently but not bold. This example shows how to override the default font-weight of an <h1> element for just the first letter.
Example 7: Border and Margin Styling
/* CSS */
.content-box::first-letter {
font-size: 3em;
color: #46b8da;
float: left;
line-height: 0.8;
margin: 0.1em 0.1em 0 0; /* Top, Right, Bottom, Left margins */
border-bottom: 3px solid #46b8da; /* Adds a border below the letter */
}
Explanation This style adds a decorative border to the bottom of the first letter. Combined with careful margin and line-height adjustments, it creates a unique and modern typographic effect.