Quackit Logo

CSS Hyperlinks

You can use CSS to change the appearance and behaviour of hyperlinks. CSS uses the following states to determine how hyperlinks look and behave:

  • A
  • A:link
  • A:visited
  • A:hover
  • A:active

Here's an example of the code that you might insert into a style sheet to achieve the desired effect.


A {font-family:Georgia,serif; font-size:large}
A:link {color:blue;}
A:visited {color: #660066;}
A:hover {text-decoration: none; color: #ff9900;
font-weight:bold;}
A:active {color: red;text-decoration: none}

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the effect of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (red) will apply when the user both activates and hovers over the A element.

Hyperlinks with no underline.

A:link { text-decoration: none }

It can confuse your users if your hyperlinks aren't underlined. A more usable solution would be only to apply this behaviour to hyperlinks only when users hover over them.

Text rollovers

A:hover { text-decoration: none }

Use the A:hover selector.

Cursor effects

A:hover { cursor:help }

Use the cursor declaration.

HTML Editor

Try it yourself!


Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
                     
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!