This color scheme isn't to everyone's taste, but it's what we're stuck with now. At least, it's what we would be stuck with if we couldn't use CSS to redefine those colors.

At its most basic, a CSS style for links might look like this:

a {
  font-weight: bold;
  color: black;
}

Now, instead of being blue and having a normal font weight, your links appear in bold, black type. Try adding that to your style1.css file; save it and see how it affects your web pages -- Figure 3.13 illustrates.

Figure 3.13. Styling all the links in our navigation to bold and black

Link States

As I mentioned previously, there are different types of links (unvisited, visited, active) that you'll come across on a web page. There's one other state that I haven't mentioned, but it's one with which you're probably familiar: the hover state (which occurs when you pass your cursor over the link). In CSS, you can change the styling of all of these link states using something that sounds complicated but is really fairly straightforward: pseudo-classes. Here is some CSS that shows the color/style scheme for the different link states:

a {
  font-weight: bold;
}
 
a:link {
  color: black;
}
 
a:visited {
  color: gray;
}
 
a:hover {
  text-decoration: none;
  color: white;
  background-color: navy;
}
 
a:active {
  color: aqua;
  background-color: navy;
}

The different states are addressed within the CSS through the use of the a element selector, and by applying (with the aid of a colon) the pseudo-classes of link, visited, hover, and active.

Note: Getting your Link States in Order

Browsers usually aren't fussy about the order in which you specify rules in your CSS file, but links should always be specified in the order shown above: link, visited, hover, and active. Try to remember the letters LVHA. The more bitter of us might find it easier to remember this mnemonic with the phrase, "Love? Ha!" We can thank Jeffrey Zeldman for that little gem. (Designing With Web Standards, Jeffrey Zeldman, New Riders.)

Let's change the styles for different link states in our project site:

   
• If it's not already open, open the project site's CSS file (style1.css), and add the above CSS at the bottom of the file.
   
• Save the CSS file.
   
• Open any of the three web pages in your browser (or hit Reload) to see how the styled links display.

Figure 3.14 shows the three different link states: the home link is unvisited, the link to the About Us page shows that it has been visited previously (shown in gray), and the link to the Contact Us page is being hovered over by the user's cursor.

Figure 3.14. Styling three different link states using CSS

Share and Enjoy: