Mayfield Global Knowledge Center



How do I customize HTML hyperlinks using CSS?

Using four pseudo-classes, you have the ability to control how hyperlinks are displayed. The link's state name is the pseudo class that defines how the hyperlink should be displayed. The list below describes the available states (link, visited, hover, active).

The pseudo-classes must be defined in this order.
  • a:link any regular link that your visitor hasn't visited (clicked) yet and the mouse isn't hovering over it.
  • a:visited any regular link that your visitor has visited (clicked) before.
    According to the Web Browser's history. If your visitor clears the browser's history the visited links will be displayed as the un-visited links.
  • a:hover any regular link that your visitor passes the mouse over it.
  • a:active any regular link that visitor clicks (presses the mouse button but before releasing it).

HTML Example Code

<ul id="linkTest>
    <li><a href="http://kb.mayfieldglobal.com">Mayfield Global Knowledge Center</a></li>
</ul>

CSS Example Code

ul#linkTest a:link { text-decoration: none; color: green; } ul#linkTest a:visited { text-decoration: none; color: maroon; } ul#linkTest a:hover { text-decoration: none; color: red; } ul#linkTest a:active { text-decoration: none; color: yellow; }

Would you like to...


del.icio.us

Print this page Print this page

Email this page Email this page

Post a comment Post a comment

Subscribe me

Add to favoritesAdd to favorites

User Opinions (16 votes)

100% thumbs up 0% thumbs down

How would you rate this answer?

Helpful
Not helpful
Thank you for rating this answer.