(^94) Chapter 3 Configuring Color and Text with CSS
page and use the 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
and
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 semanticallysince the navigation is a list of hyper-
links and not a true paragraph of text. Replace the
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 semanticallysince the navigation is a list of hyper-
links and not a true paragraph of text. Replace the
tags with
tags as follows:
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
companynameas 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 ele-
ment to apply the class as follows:
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
companynameas 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 ele-
ment to apply the class as follows:
Trillium Media Design will bring