HTML and CSS Reference
In-Depth Information
Listing 6-25.
An anchor element
<a href="index.html">Back to the Power Outfitters homepage</a>
Listing 6-26.
An anchor element styled using CSS
a {
border: 3px solid #111;
background: #666 url("arrow.png") no-repeat 15px 50%;
color: #fff;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 15px 20px 15px 45px;
text-shadow: 1px 1px 0 #000;
text-decoration: none;
}
a:hover {
background-color: #555;
border-color: #fff;
border-style: dashed;
}
a:active {
background-color: #c99;
border-color: #c00;
padding: 16px 19px 14px 46px;
}
Figure 6-9 shows the output of the code in the previous two listings.
Figure 6-9.
Browser output of an anchor element styled with CSS
The markup in Listing 6-25 should look familiar; there's nothing too crazy going on there. We have
introduced some interesting style properties in Listing 6-26, though. Let's take a look.
