Quick HTML




Link style

Links can have their own font, size, and color.

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>

Visit the Nasa website

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>

Visit the Nasa website

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>

Visit Yahoo

Underline

Links can have no underline. For example:
A:link { text-decoration: none; }
Visit the <A href="http://www.nasa.gov">Nasa website</A>

Visit the Nasa website


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>

Visit the Nasa website

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.


This link is red.
This link 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: Home thumbnail


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


Click the thumbnail to see my house: Home thumbnail

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>


Move the cursor over these links:
arrow      hand      help      crosshair


Next page :

the graphic properties of the background.


|   Back   |   Index   |   Next   |