Tuesday, February 14, 2012

Styling Links using Love/Hate

Links can be styled with any CSS property, e.g. color, font-family, etc.). Links are super special, because they can be styled differently depending on what state they are in. (NIFTY!)
    The four links states are:
  1. a:link - a normal, unvisited link
  2. a:visited - a link the user has visited
  3. a:hover - a link when the user mouses over it
  4. a:active - a link the moment it is clicked
Example:
  • a:link {color:blue} /* unvisited link */
  • a:visited {color:purple} /* visited link */
  • a:hover {color:darkpurple} /* mouse over link */
  • a:active {color:olive} /* selected link */
Now, I just colored those examples with colors I made up. They may be similar to what the default is in your browser. Default link settings are ugly and should be avoided...at all costs. Restyling your links is easy, but you have to know the order rules:
  • a:hover must come after a:link and a:visited
  • a:active must come after a:hover
Guess what? Nobody can remember all that without looking it up each time. Luckily for you and me, there is an anagram to help you remember. Remember the order like this: LoVe/HAte. Link is first, then visited, then hover, then active. VoilĂ ! (To get that spelling I literally Googled "How do you spell the word that sounds like Walla--worked like a charm)

Common Link Styles

In the example above, the link changes color depending on what state it is in. Another way to style links is through text decoration. The text decoration property is mainly used to control things that are underlined or not underlined. Default link style is a vile, blue, underlined word. Let's say you want your links to be normal but when a user hovers over our link, you want it underlined to indicate a link. Try this.
To get Underline-free Links but Underline your Hover and Active:
  • a:link {text-decoration:none;}
  • a:visited {text-decoration:none;}
  • a:hover {text-decoration:underline;}
  • a:active {text-decoration:underline;}
Change to your specifications. Play around! Have fun with it!

No comments:

Post a Comment