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

page and use the <span> element to apply this class. Open the embedded3.html file in
Notepad. Your Web page will look similar to the one shown in Figure 3.12 after the
changes are complete.
Figure 3.12
This Web page uses
<div> and <span>
elements
Configure the Navigation Area
View the source code of embedded3.html and notice that the hyperlinks (anchor ele-
ments) in the navigation area are contained within a paragraph element. While this is
valid XHTML, it isn't the best choice semantically since the navigation is a list of hyper-
links and not a true paragraph of text. Replace the <p> tags with <div> tags as follows:
<div class="nav"> <a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a> </div>
Save your file as embedded4.html and test in a browser. You'll notice that the naviga-
tion area does not look any different— however, “under the hood” the code is better
semantically (see Chapter 7 for more information about this topic).
Configure the Company Name
View Figure 3.12 and notice that the company name, Trillium Technologies, is dis-
played in bold and serif font within the first paragraph. You'll code both CSS and
XHTML to accomplish this. First, create a new CSS rule that configures a class called
companyname as bold, serif font, and 1.25em in size. The code follows:
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
}
Next, modify the beginning of the first paragraph of XHTML to use the <span> ele-
ment to apply the class as follows:
<p> <span class="companyname"> Trillium Media Design </span> will bring