CSS Hyperlinks

You can use CSS to change the appearance and behavior of hyperlinks.

To do this, you can use the following selectors/pseudo-classes:

These selectors/pseudo-classes represent the 'anchor' element (specified using the HTML <a> tag) and its various states.

Examples

Some nice effects can be achieved by using the text-decoration property in conjunction with the color property.

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

CodeResult

Here goes an example hyperlink.

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 'anchor' element.

Hyperlinks with no underline

CodeResult

Here goes an example hyperlink.

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

CodeResult

Here goes an example hyperlink.

Cursor Effects

Use the cursor declaration.

CodeResult

Here goes an example hyperlink.

Try It!

Modify the following code then press "Refresh" to see your own changes on the fly.

 
Source CodeResult

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad