CSS Tutorial – How to Style CSS Links

This CSS tutorial will discuss how to use the same CSS links throughout the design of your web site. If you place them all at the
beginning of your CSS style sheet the links on all your web pages will behave the same.

You will notice I haven’t defined the size of the links because they will inherit the size of the font styled in the body of your cascading style sheet.

CSS


<style type="text/css">
a:link {color: #0000FF;}
a:visited {color: #3366FF;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
</style>


Here are the 4 different styles of links called selectors:

a:link
Defines the style for normal unvisited links.
The color is dark blue in the example above.

a:visited
Defines the style for visited links.
The color of the visited link above is light blue.

a:active
Defines the style for active links.
A link becomes active once you click on it.
The color of the active link above is dark red.

a:hover
Defines the style for hovered links. A link is hovered (changes color or form) when the mouse moves over it. The hover link becomes underlined in the above example.

The next CSS tutorial will discuss how to create multiple link styles on the same page so you use different colors and font sizes according to what your design needs are.