HTML and CSS Reference
In-Depth Information
To create the initial cap and first line styles:
1. Go to the home.htm file in your text editor.
2. Directly above the closing </head> tag, insert the following code, as shown in
Figure 3-57:
<style type=”text/css”>
section > p:first-of-type:first-line {
text-transform: uppercase;
}
section > p:first-of-type:first-letter {
font-size: 250%;
font-family: 'Times New Roman', Times, serif;
}
</style>
Figure 3-57
Styling pseudo-elements
first-line
pseudo-element
displays the first line of the
first paragraph in uppercase
displays the first lette r in a
large serif font
first-letter pseudo-element
3. Save your changes to the file and then reload home.htm in your Web browser.
As shown in Figure 3-58, the first line of the opening paragraph is dis-
played in uppercase letters, and the first letter of that line is larger than the
surrounding text.
Figure 3-58
First letter and fi rst line styles
first line appears in
uppercase letters
first letter appears
in a larger font
Trouble? At the time of this writing, neither Safari nor Chrome is able to apply
the text-transform style property with the first-line pseudo-element.
Search WWH ::




Custom Search