Styling the <a> Element

Styling the <a> Element

To avoid targeting all links on the page, a specific selector should be used. Here, you will use ul#topnav li a:link, ul#topnav li a:visited, ul#topnav li a:hover, and ul#topnav li a:active.

The link and visited pseudo-classes can be set with text-decoration: none (which will turn off link underlines) and color: #FFF as shown in Listing 18.9.

The hover and active pseudo-classes also will be set with text-decoration: none as well as color: #387A9B; and background: #FFF;. The results can be seen in Figure 18.7.

Figure 18.7. Screenshot of styled <a> element.

Listing 18.9. CSS Code for Styling the <a> Element

body
{
    margin: 0;
    padding: 0;
    text-align: center;
    font: 85% arial, helvetica, sans-serif;
    background: #B0BFC2;
    color: #444;
}

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF;
}

h1
{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
}

h1 img
{
    display: block;
    border: 0;
}

ul#topnav
{
    margin: 0;
    padding: 5px 10px;
    list-style-type: none;
    background: #387A9B;
}

ul#topnav li
{
    display: inline;
    background: url(header-bullet.gif) no-repeat 0 50%;
    padding: 0 10px 0 8px;
}

ul#topnav li a:link, ul#topnav li a:visited
{
    text-decoration: none;
    color: #fff;
}

ul#topnav li a:hover, ul#topnav li a:active
{
    text-decoration: none;
    color: #387A9B;
    background: #fff;
}