HTML and CSS —

Modifying First-Letter and First-Line Text

You can style the first letter of text (a drop cap) and the first line of text using the pseudo element selectors. You haven't seen these yet, so here's a look:

:first-line
:first-letter

These get attached to the element to which you'd like the style to apply (see Example 9-9).

Example 9-9. Using pseudo element selectors to style
p:first-line {font-weight: bold; color: #333;}
p:first-letter {font-style: italic; color: #999;}

In Figure 9-16, I've applied these styles to text.

Figure 9-16. Using pseudo element selectors to create first-line and first-letter styles.