Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1

(^92) Chapter 3 Configuring Color and Text with CSS
footer area to use small, italicized text. When setting a style for an id, place a hash
mark (#) in front of the idname in the style sheet. The following code will configure an
idcalled footerin a style sheet:
#footer { font-size: .75em;
font-style: italic;
}
The styles set in the footer idcan be applied to any XHTML element you wish by
using the idattribute, id="footer". Do not write the #in front of the idvalue in the
XHTML tag.
The following code will apply the footer idstyles to a

tag:



Using CSS with an idselector is similar to using CSS with a classselector. It’s com-
mon practice to use an idselector 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-sizeand font-weightproperties.
The code follows:
.nav { font-weight: bold;
font-size: 1.25em;
}
Modify the opening paragraph tag of the navigation area. Add a classattribute that
associates the paragraph with the navclass as follows:

Configure the Footer Area
Create an idnamed footer, which sets the font-sizeand font-styleproperties.
#footer { font-size: .75em;
font-style: italic;
}
Modify the opening paragraph tag of the footerarea. Add an idattribute that associ-
ates the paragraph with the idclass.
Free download pdf