Creating a drop cap using a CSS pseudo-element

Required files styling-semantic-text-2.html and styling-semantic-text-2.
css from the chapter 3 folder.
What you’ll learn How to create a drop cap for a website, and how to use the CSS
float property. Any element can be floated left or right in CSS,
and this causes subsequent content to wrap around it.
Completed files drop-cap.html and drop-cap.css from the chapter 3 folder.

1. Create a new rule that targets the relevant character. For this, you can use a
pseudo-element, first-letter, and the adjacent sibling selector created earlier in
the “Styling semantic markup” section. See Appendix D (“CSS Reference”) for more
on pseudo-elements.
h1+p:first-letter {
}
In plain English, this rule is saying, “Apply this rule to the first letter of the paragraph
that follows the level-one heading.”
2. Float the character and increase its size. Add a float: left property/value pair to
float the first character in the paragraph to the left, which makes subsequent content
wrap around it. Then set a large font-size value to increase the size of the
character compared to the surrounding text.
h1+p:first-letter {
float: left;
font-size: 3em;
}
3. Finally, tweak the positioning. Define a line-height value and margin-top value to
vertically position the character; you may need to experiment some when working
on your own designs outside of this exercise, since the values required are somewhat
dependent on the font-size setting. The margin-right setting provides
some spacing between the drop cap and the subsequent text.
h1+p:first-letter {
float: left;
font-size: 3em;
line-height: 1.0em;
margin-top: -3px;
margin-right: 0.15em;
}Although this technique is the most straightforward one for working with drop
caps, the results aren’t entirely satisfactory. Due to the way different browsers deal
with the first-letter pseudo-element, display isn’t particularly consistent across
browsers and platforms—see the following two images, which show the results in
Firefox and Safari. Therefore, if you want to use drop caps with more precision, it’s
best to fall back on a more old-fashioned but tried-and-tested method: the span
element.