Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 92

footer area to use small, italicized text. When setting a style for an id , place a hash
mark ( # ) in front of the id name in the style sheet. The following code will configure an
id called footer in a style sheet:
#footer { font-size: .75em;
font-style: italic;
}
The styles set in the footer id can be applied to any XHTML element you wish by
using the id attribute , id="footer" . Do not write the # in front of the id value in the
XHTML tag.
The following code will apply the footer id styles to a <p> tag:
<p id="footer">This paragraph will be displayed using styles
configured in the footer id.</p>
Using CSS with an id selector is similar to using CSS with a class selector. It's com-
mon practice to use an id selector to refer to a single XHTML element and a class
selector to refer to multiple XHTML elements.
HANDS-ON PRACTICE 3.4
In this Hands-On Practice you will modify the CSS and the XHTML in the Trillium
Technologies page—configuring the navigation and page footer areas. Launch Notepad
and open embedded2.html.
Configure the Navigation Area
The navigation links would be more prominent if they displayed in a larger and bolder
font. Create a class named nav , which sets the font-size and font-weight properties.
The code follows:
.nav { font-weight: bold;
font-size: 1.25em;
}
Modify the opening paragraph tag of the navigation area. Add a class attribute that
associates the paragraph with the nav class as follows:
<p class="nav" ><a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a></p>
Configure the Footer Area
Create an id named footer , which sets the font-size and font-style properties.
#footer { font-size: .75em;
font-style: italic;
}
Modify the opening paragraph tag of the footer area. Add an id attribute that associ-
ates the paragraph with the id class.
<p id="footer" >Copyright &copy; 2011 Your Name Here</p>