Styling the a Element

Styling the <a> Element

The final step in this lesson involves setting the link colors. You will work on four pseudo-classes.

The a:link pseudo-class can be set to color: #175B7D, and the a:visited pseudo-class can be set to color: #600.

The a:hover and a:active pseudo-classes also can be set with color: #fff; and background: #175B7D as shown in Listing 19.12. The results can be seen in Figure 19.11.

Listing 19.12. CSS Code for Styling the <h2> Element

body {     text-align: center;     background: #B0BFC2;     color: #444; } #container {     text-align: left;     margin: 0 auto;     width: 700px;     background: #FFF url(header-base.gif) repeat-y; } h1 {     background: #D36832;     color: #FFF;     padding: 20px;     margin: 0;     border-bottom: 5px solid #387A9B; } #nav {     float: left;     width: 130px;     display: inline;     margin-left: 20px;     padding: 15px 0; } #nav ul {     margin: 0;     padding: 0;     list-style-type: none;     text-align: right; } #nav li {     background: url(header-bullet.gif) no-repeat 100% .4em;     padding: 0 10px 5px 0; } #content {     float: left;     width: 475px;     margin-left: 45px;     padding: 15px 0; } #footer {     clear: both;     background: #387A9B;     color: #fff;     padding: 5px 10px;     text-align: right;     font-size: 80%; } h2 {     margin-top: 0;     color: #B23B00;     font-weight: normal; } a:link {     color: #175B7D; } a:visited {     color: #600; } a:hover, a:active {     color: #fff;     background: #175B7D; } 

Figure 19.11. Screenshot of styled <a> element.