HTML and CSS Reference
In-Depth Information
1. In styles.css, add the following:
#content p:first-of-type:first-letter {
font-size: 4em;
font-weight: bold;
}
2. Save styles.css.
Here, you combine quite a lot of the selectors you've learned so far. You use a descendant combinator to select only
<p> elements within the <div id=”content” role=”main”> element. You also combine the :first-
of-type pseudo-class with :first-letter , which has selected the first element of type <p> , and then select
only the :first-letter from that.
By using this selector, you style the first letter of the content section with a large and stylish typographic letter (as
shown in Figure 3-5), much like an old book! You learn what an em is in the next chapter and font styles such as
font-weight in Chapter 11.
Figure 3-5 The first letter of the content area styled to be bigger and bolder than other text.
Generating Content Before and After an Element
Sometimes, you might want to add a style before or after an element that doesn't warrant using another element
within the HTML to do that. For this, you can use :before and :after pseudo-elements.
Using :before and :after , add some quotation marks to the customer testimonials:
1. In styles.css, below the blockquote p rule set, add the following:
blockquote p:before {
content: “\201C”;
}
2. Save styles.css.
Here, you use another descendant combinator to select only <p> elements within <blockquote> elements and
then tell the browser to create a pseudo-element before the <p> element and give it the content “\201C” . What on
earth is \201C ?! It's an American Standard Code for Information Interchange (ASCII) value, which is a scheme
used by computers to understand text. The \201C represents an opening quotation mark ( “) . You can find more
ASCII codes at www.ascii.cl/htmlcodes.htm .
Search WWH ::




Custom Search