Links and Styles

by: Ades Tynyshev

Links and Styles
As you know there are four states of a link, namely: Initial State, Visited State, Mouse Over State and Active State. For example if you were to put the following code between <head></head> tags in the page, all the link states in that page would be red. Which means when you visit the page you will see all the links in read, and when you click on them or hover on them you will not see any change. Because all the link states have been defined to be red. Let's take our tutorial from here.

<style type="text/css">
<!--
a:link { color: red; }
a:visited { color: red; }
a:hover { color: red; }
a:active { color: red; }
-->
</style>

How about if I want to make my links without underline when someone mouse overs on them? You just have to add a new state  text-decoration: none; to the a:hover area between {} braces.

a:hover { color: red;  text-decoration: none; }

So if you don't want to have underline on your links at all, just add  text-decoration: none; to all the 4 states and your links will not have underline.

How about adding a background to our links when somebody mouseOvers on them? For that you have to add background-color: to the hover state like this:

a:hover {
     color: red;
     text-decoration: none;
     background-color: #CCCCCC;
}


You can also change the cursor when somebody mouse overs on your link. Let's change the cursor to a help icon when somebody mouseOvers on our links.


a:hover {
     color: red;
     text-decoration: none;
     cursor: help; 
}

Other cursor states that you can use are:

  • auto
  • crosshair
  • help
  • move
  • pointer
  • text
  • wait
  • e-resize
  • ne-resize
  • n-resize
  • nw-resize
  • s-resize
  • se-resize

Be careful when you are using some of the cursor states on your links, because if they are used improperly it might confuse the users a great deal.



Article published Tuesday, 31st May 2005
© 2008 NetVisits, Inc. All rights reserved.