HTML and CSS Reference
In-Depth Information
Save and test your page in a browser. If you notice that the Trillium Media Design text
seems to crowd the left margin, add a   nonbreaking space special character in
the body of the Web page after the opening <h1> tag.
Configure the h2 Selector
Configure the CSS rule to use the same font typeface as the h1 selector.
h2 { background-color: #AEAED4;
color: #191970;
font-family: Georgia, "Times New Roman", serif;
}
Add a New Paragraph Element Selector
Configure text in paragraphs to display just slightly smaller than the default text size.
Use the font-size property set to .90em .
p { font-size: .90em; }
Configure the Unordered List
Configure the text displayed in the unordered list to be bold.
ul { font-weight: bold; }
Save your page as embedded2.html and test it in a browser. Your page should look sim-
ilar to the one shown in Figure 3.9. The student files contain a sample solution at
Chapter3/embedded2.html. CSS is quite powerful—just a few lines of code significantly
changed the appearance of the Web page. You may be wondering if even more cus-
tomization is possible. For example, what if you did not want all the paragraphs to dis-
play in exactly the same way? While you could add inline styles to the Web page code,
that's usually not the most efficient technique. The next section introduces the CSS
class and id selectors, which are widely utilized to configure specific page elements.
FAQ
Is there a quick way to apply the same styles to more than one
XHTML tag or more than one class?
Yes, you can apply the same style rules to multiple selectors (such as XHTML elements,
classe s, or id s) by listing the selectors in front of the rule. The code sample below shows the
font-size of 1em being applied to both the paragraph and line item elements.
p, li { font-size: 1em; }
3.6 The Class and Id Selectors
The Class Selector
There are times when you'd like to apply a CSS rule to a certain class of elements on a
Web page and not necessarily tie the style to a particular XHTML tag. This is when
 
Search WWH ::




Custom Search