Previous Page
Next Page

Distinguished Links

A common use of CSS is to create fancier effects on links than you get with just plain old HTML. In Script 11.6, we take the act numbers at the top of the page and make them stand out, as shown in Figure 11.6.

Script 11.6. Changing the color and behavior of links within text.

body {
     background-color: white;
     color: black;
     font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif;
     font-size: 0.9em;
}
img {
     margin-right: 10px;
}
.character {
     font-weight: bold;
     text-transform: uppercase;
}
div.character {
     margin: 1.5em 0em 1em 17em;
}
.directions {
     font-style: italic;
}
.dialog, .directions {
     margin-left: 22em;
}
#week2 {
     background-color: #FFFF00;
}
a {
     text-decoration: none;
     padding: 5px 10px 5px 10px;
}
a:link {
     color: #0000FF;
}
a:visited {
     color: #000000;
}
a:hover {
     color: #FFFFFF;
     background-color: #000000;
     text-decoration: underline;
}
a:active {
     color: #FF0000;
}

Figure 11.6. Using the a:hover pseudo-class allows you to add a rollover-like effect to links. Links appear without decoration (top) until you place the mouse over them. Then the link color and the background color change, and an underline appears (bottom).


To enhance your links:

1. 
a {
  text-decoration: none;
  padding: 5px 10px 5px 10px;
}



This rule applies to all anchor tags and says that we want links to appear without underlines. The links should also have 5 pixels of space above, 10 pixels to the right, 5 pixels below, and 10 pixels to the left.

2. 
a:link {
  color: #0000FF;
}



This rule turns all links blue (but will be overridden shortly for some cases). The colon after an element, followed by a property, indicates that we are declaring a pseudo-class. In CSS, pseudo-classes are used to add special effects to some selectors.

3. 
a:visited {
  color: #000000;
}



This rule applies to all visited links and says that they should display with black text. Combined with the rule in step 1, visited links will look just like regular text.

4. 
a:hover {
  color: #FFFFFF;
  background-color: #000000;
  text-decoration: underline;
}



This rule says that when we're hovering (i.e., putting the mouse cursor over a link), the link should display in white text, with a black background and underlined. Because this rule is after the previous rule, it will still apply when hovering over a visited link. If it was placed before the previous rule, that one would take priority.

5. 
a:active {
  color: #FF0000;
}



This rule says that when the link is being clicked, turn the text red.

Tip

  • The different anchor pseudo-class rules can have problems with the cascade. The solution is to put them in a particular order (link, visited, hover, active). The mnemonic to remembering it: LVHA, or LoVe/HAte. Really.



Previous Page
Next Page