HTML and CSS Reference
In-Depth Information
<body>
<h1>CSS Buttons!</h1>
<div id="button">
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</div>
</body>
</html>
Save your file as link2.html. Test your page in a browser and compare it with Figure 7.6.
The student files contain a sample solution at Chapter7/link2.html. The
div
that con-
tains the navigation buttons was assigned to the id button. The anchor tags within
the button id were configured to have a button look with the
border
,
background-
color
, and
padding
attributes. Then, CSS rules using an
anchor
selector with the
button
id and
link
,
visited
, focus,
hover
, and
active
pseudo-classes were
configured.
Part 3
It is often the case that the design of the Web page requires the main navigation links to
look different from the links within the content of the pages. You have already created
a page, link2.html, with specially configured navigation links. You used the id called
button
to configure these links. In this part of the Hands-On Practice, you will add a
line of text containing a hyperlink to the page to verify that the hyperlink retains the
default browser appearance and behavior. Figure 7.7 shows a sample page.
Figure 7.7
The link to Yahoo!
retains the default
hyperlink properties
Launch Notepad and open your link2.html file. Save the file as link3.html. Modify the
title to be “CSS Pseudo-class Example 3” and add the following paragraph under the
navigation links:
<p>Visit <a href="http://yahoo.com">Yahoo!</a>.</p>
Save your file, test your page in a browser, and compare it with the one shown in
Figure 7.7. The student files contain a sample solution at Chapter7/link3.html. Because
the new link is not part of the defined id
button
, it retains the default hyperlink
characteristics. If you needed yet another set of characteristics for links in another
section of the page such as the footer, you could define a new id or class with a unique
name and configure pseudo-classes, as was done in Part 2 of this Hands-On Practice.
Search WWH ::
Custom Search