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.