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:

a
a:link
a:visited
a:hover
a:active

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.

<style type="text/css">
.example1 a {font-family:Georgia,serif; font-size:large}
.example1 a:link {color:forestgreen;}
.example1 a:visited {color:seagreen;}
.example1 a:hover {text-decoration:none;color:yellowgreen;font-weight:bold;}
.example1 a:active {color:red;text-decoration: none}
</style>
<!-- Place the above styles between the document's <head></head> tags or in an external stylesheet -->
<div class="example1">Here goes an example <a href="http://www.html.am/html-codes/links/">hyperlink</a>.</div>

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

<style type="text/css">
.example2 a:link { text-decoration: none }
</style>
<!-- Place the above styles between the document's <head></head> tags or in an external stylesheet -->
<div class="example2">Here goes an example <a href="http://www.html.am/html-codes/links/">hyperlink</a>.</div>

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

<style type="text/css">
.example3 a:hover { text-decoration: none }
</style>
<!-- Place the above styles between the document's <head></head> tags or in an external stylesheet -->
<div class="example3">Here goes an example <a href="http://www.html.am/html-codes/links/">hyperlink</a>.</div>

Cursor Effects

Use the cursor declaration.

<style type="text/css">
.example4 a:hover { cursor: help }
</style>
<!-- Place the above styles between the document's <head></head> tags or in an external stylesheet -->
<div class="example4">Here goes an example <a href="http://www.html.am/html-codes/links/">hyperlink</a>.</div>

Try It!

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

Web.QHMIT.com