A link or hyperlink is a connection from one web resource to another.
Styling Links
A link has four different states — link
, visited
, active
and hover
. These four states of a link or hyperlink can be styled differently through CSS properties using the pseudo-classes of anchor element, depending on what state they are in.
Here’re the CSS pseudo-classes associated with HTML <a>
tag that you can use to define the different styles for the different states of a hyperlink.
- a:link — Set styles for a normal or unvisited links, that has no mouse pointer over it.
- a:visited — Set styles for a link the user has visited but has no mouse pointer on it.
- a:hover — Set styles for a link when the user place the mouse pointer over it.
- a:active — Set styles for a link that is in the process of being clicked.
You can specify any CSS property you’d like e.g. color
, font-family
, background
, etc. to each of these selectors to redefine the style of links, just like you’d do with the normal text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of setting link styles</title> <style type="text/css"> a:link { color: #FF0000; text-decoration: none; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; text-decoration: underline; } a:active { color: #0000FF; } </style> </head> <body> <p><a href="http://www.tutsocean.com/" target="_top">Visit Tutsocean website</a></p> </body> </html> |
The order in which you are setting the style for several link states is important, as what defines last takes precedence over the earlier CSS code.
Note:The order of the pseudo classes should be the following:
:link
,:visited
,:hover
,:active
,:focus
in order for these to work properly.
Standard Link Styles
In all major web browsers, links on your web pages have underlines and use the default HTML link colors, if you don’t set style for them. For example, the default link colors in Gecko based web browsers like Firefox are — blue for unvisited, purple for visited and red for active.
Setting the Color of Links
Following is the example which demonstrates how to set the link color.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of setting link styles</title> <style type="text/css"> a:link { color: #FF0000; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; } a:active { color: #0000FF; } </style> </head> <body> <p><a href="http://www.tutsocean.com/" target="_top">Visit Tutsocean website</a></p> </body> </html> |
Removing the Default Underline from Links
The text-decoration
CSS property is generally used to remove the default underlines from links. The following example demonstrates how to remove or set the text-decoration
property for the different states of a hyperlink.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of setting link styles</title> <style type="text/css"> a:link { color: #FF0000; text-decoration: none; } a:visited { color: #00FF00; text-decoration: none; } a:hover { color: #FF00FF; text-decoration: underline; } a:active { color: #0000FF; text-decoration: underline; } </style> </head> <body> <p><a href="http://www.tutsocean.com/" target="_top">Visit Tutsocean webiste</a></p> </body> </html> |