HTML and CSS Reference
In-Depth Information
To Test Links on a Web Page
The following steps show how to test the links on the Oceanside Hotel and Sports
Club home page to verify that they work correctly.
1
With the Oceanside Hotel and Sports Club's home page displayed in the browser, point to the
e-mail link, oceanside@isp.com and click the link to open the default e-mail program with the
address oceanside@isp.com in the To: text box.
2
Click the Close button in the new message window. If a dialog box asks if you want to
save changes, click No.
3
With the USB flash drive in drive G, click the Tennis link from the home page just created. Click
Home to return to the home page from the Tennis page. Next, click the Dining link from the
Home page. Click Home to return to the home page from the Dining page. The link for the
Golf page will not work because that Web page is not yet created; you will create it later in
this chapter. The links work on the Tennis and Dining Web pages as those pages were supplied
in the Data Files with the navigation already coded.
External Style Sheets
External style sheets are the most comprehensive type of style sheet and can be used to
control the consistency and look of many Web pages within a Web site. Adding an exter-
nal style sheet to a Web page involves a two-step process of creating an external style
sheet and then linking this style sheet to the desired Web pages. The most beneficial fea-
ture of the external style sheet is that you can easily change the style (appearance) of all
Web pages into which the style sheet is linked just by changing the external style sheet.
For instance, the font-family and font-size for all four Web pages in this chapter's project
are set in the external style sheet. If the owners of the Web site decide that they do not
like the look (or style) of that font-family or font-size, you only have to make the change
in one file — the external style sheet. Compare that process to having the font-family
and font-size inserted into every single Web page in a Web site either with embedded
style sheets or (worst case) inline styles. To make a change to all font-family and font-
size styles, you would have to change those in every single place that the styles reside.
External (linked) style sheets are the most efficient and powerful way to change styles for
an entire Web site.
An external style sheet is a text file that contains the selectors and declarations for
the styles you want to apply across the Web site. The sample code that follows shows an
example of an external style sheet used to set table, paragraph, image, and link formatting.
Note the use of classes (e.g., menu, menuicon, menupipe) in this external style sheet that
provides a finer level of control within a table used for navigation.
Classes
Note that the classes are
named with a period
(.) after the element is
defined. Thus, the table
.menu statement identifies
a class named menu that
will be used with the table
elements.
body
{font-family: Centaur, “Century Gothic”, Arial;
font-size: 14pt;}
p
{margin-left: 10pt;
margin-right: 10pt;}
a
{text-decoration: none;
color: black;}
img
{border-color: transparent;}
