Meet the pseudo-element “First-Letter”. It is used to pick out the first letter within your text to add a special style. It’s a finicky friend that you probably only want to invite over under certain circumstances.
A CSS pseudo-element is used to style specified parts of an element. I find pseudo-elements interesting because they seem to be a category of CSS that you learn gradually as the need arises. Certain types you might use fairly often (‘nth-child’ and ‘hover’) but others might only be utilized if you need to fit a certain aesthetic or style.
Here’s the HTML I will be using for the example.
The HTML Structure
<div class="content"> <h1>Header Uno</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga fugiat excepturi, vitae odit consequatur omnis blanditiis pariatur error odio. Asperiores facere est fugiat illum esse sunt omnis, iste doloribus excepturi maxime iure officiis, quibusdam? Nisi sequi deleniti porro veniam, deserunt ipsa, suscipit accusantium numquam ea, consequuntur fugiat repudiandae distinctio tempore rem quas, laborum natus quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem recusandae similique, quaerat aliquam nihil dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum inventore deserunt, esse numquam et dolorum? Quam fugiat labore laudantium, ut? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, fuga! Lorem ipsum dolor sit.</p> </div> <!-- /.content -->
When we start with some text within a <p> tag without using the first-letter styling in CSS, the styling will appear similar to below.
You can change the following qualities while using ‘first-letter’:
- font properties
- color properties
- text-transform
- text-decoration
- background properties
- margin properties
- padding properties
- border properties
- vertical-align (only if “float” is “none”)
- line-height
- float
- clear
When creating a drop cap, you want to increase the font-size and assign a new font-family to help differentiate it from the rest of the paragraph content. Now we float it to the left so that the rest of the text wraps around it. From there, I adjusted the space between the lines of text using line height.
Traditionally, the baseline of the selected letter should rest on a baseline of the adjoining text and, ideally, the top of it should align with the top of the capital letters in the first line of text.
The “First-Letter” Structure
.content p:first-letter {
font-family: Georgia;
float: left;
color: Indigo;
font-size: 75px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
For the final product, I adjusted the colour, font-family (Georgia, obviously), padding and line-height. And this was the final result! (Check out the code in its entirety over at CodePen.)
Remember that…
- You need to be extra specific in your CSS selectors or else it will target the first letter of every single <p>. (That is where you might want to use first-child AND first-letter.)
- When being used as a drop cap, any change in the surrounding text will potentially and most likely push the drop cap out of alignment.
- Oh, and don’t forget dealing with compatibility with different browsers and breakpoint(s) for responsive design! Pfft.
Gee. Maybe don’t invite “First Letter” unless all the stars are aligned.