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; }