Basic customizing

The simplest way to customize the link appearance is this:

A:link { font-weight: bold; color: red;  }

Visit the <A href="http://www.nasa.gov">Nasa website</A>

Selected links

We can change the link style when the mouse is over the the link...

A:hover { font-weight: bold; color: green;  }

Visit the <A href="http://www.nasa.gov">Nasa website</A>

Visited links

Visited links can have a different appearance.

For example, a link can change his color once clicked.
The following example shows a link that will turn in black.

A:visited { color: black; }

Visit <A href="http://www.yahoo.com">Yahoo</A>

Underline

Links can have no underline. For example:

A:link { text-decoration: none; }

Visit the <A href="http://www.nasa.gov">Nasa website</A>



The following instruction tells to underline the link when it is selected:

A:hover { text-decoration: underline; }

Visit the <A href="http://www.nasa.gov">Nasa website</A>

Link classes

We can create different classes of links using this syntax:

A.type1:link { font-size: 16px; color: red; font-weight: bold; }
A.type2:link { font-size: 12px; color: teal; font-weight: bold; }

This <A class="type1" href="http://www.msn.com">link</A> is red.
This <A class="type2" href="http://www.msn.com">link</A> is green.

Image link border

We can remove or customize the border surrounding a picture used as a link:

A IMG  { border: none; }
A.red IMG { border: 3px dashed red; }

Click the thumbnail to see my house:
<A HREF="house.jpg"><IMG src="littlehouse.jpg" ALT="Home thumbnail"></A>



Click the thumbnail to see my house:
<A class="red" HREF="house.jpg"><IMG src="littlehouse.jpg" ALT="Home thumbnail"></A>

Cursors

We can define what kind of cursor must be displayed over a link.
The most used cursors are:

• the default pointer, represented by an arrow
• the pointer, represented by an hand
• the help cursor, represented by a question mark
• the crosshair cursor, represented by a "+" sign

A.one:hover { cursor: default; }
A.two:hover { cursor: hand; }
A.three:hover { cursor: help; }
A.four:hover { cursor: crosshair; }

Move the cursor over these links:
<A class="one" href="test.htm">arrow</A>
<A class="two" href="test.htm">hand</A>
<A class="three" href="test.htm">help</A>
<A class="four" href="test.htm">crosshair</A>

Next page :

the graphic properties of the background.