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.