HTML and CSS Reference
In-Depth Information
If you want to change the color of text links or image link borders to override the
browser defaults, you can designate those changes in the anchor <a> or <body> elements
using an embedded or external style sheet, or by using an inline style. Recall that you
use an inline style to change the appearance (or style) of a single element. An embed-
ded (or internal) style sheet is used to change the styles of similar elements in one Web
page. Finally, an external style sheet is contained in a separate .css document and is used
to change the style in an entire Web site. (You will use an external style sheet in the next
chapter.) To use an embedded or external style sheet in the anchor element to change nor-
mal, visited, and active link colors from the default, you would use the following format:
Link Colors
You can change the link
colors in popular browsers.
In Internet Explorer,
click the Tools button on
the Command bar, click
Internet Options, General
tab, and the Colors button
under Appearance. In
Mozilla Firefox, click the
Tools menu, Options,
Content tab, and the Colors
button under Fonts &
Colors. In both browsers,
you change colors by
selecting a color from a
color palette.
a
{color: black;}
where color is a designated color name, such as black, or a hexadecimal color code. To
make the same change with an inline style, the tag format is:
<a style=”color: black”>
Links, by default, are underlined to indicate that they are links. You can disable the under-
lining of a link with the text-decoration property within the anchor tag. The
text-decoration
property
allows text to be “decorated” with one of five values: underline, overline, line-through,
blink, or none. This property can be used in a variety of tags including the anchor tag.
In the design phase you should carefully consider the benefits and disadvantages of
any style change, especially to a default style. Be sure that users are still able to immediately
see that specific text is used as a link before turning off link underlines or changing the
default link color. If you determine that you can effectively turn the underline off on a
link (as you do for the image link that you create later in this chapter), you can change
the text-decoration attribute to none. To do this with an embedded or external style, you
would enter the following code:
a
{text-decoration: none;}
To change text-decoration to none with an inline style, enter:
<a style=”text-decoration: none”>
Linking to Another Web Page Within the Same Web Site
Web pages often include links to connect one Web page to another page within
the same Web site. For example, a visitor can click a link on the home page of a Web site
(Figure 3-5a on the next page) to connect and view another Web page on the same Web
site (Figure 3-5b). The Web pages created in this project include links to other pages
in the same Web site: (1) the Underwater Tours by Eloise home page includes a text
link to the Sample Photographs Web page; and (2) the Sample Photographs Web page
includes both text and image links back to the Underwater Tours by Eloise home page.
To link the words “sample photographs” on the underwatertours.html home page to the
samplephotos.html Web page, you need the following HTML code:
Links on a Web Page
An anchor tag also allows
visitors to move within
a single Web page. Use
the id attribute to allow
movement from one
area to another on the
same page. This linking
technique is useful,
particularly on long pages.
An index of links can also
provide easy access to
various areas within the
Web page.
<a href=”samplephotos.html”>sample photographs</a>
The href in the anchor <a> tag indicates that when the words “sample photographs” are
clicked, the visitor links to the samplephotos.html Web page. You end the link with the
</a> tag. If you did not add the </a> tag, then all text after the words “sample photographs”
would be linked.
