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.
1. Add the span elements. Wrap a span element around the first character of the paragraph and give it a class value of dropCap. Wrap another span element around the initial character, without any class attribute. The additional span makes it easier to fine-tune the positioning of the drop cap.
