CSS (Cascading Style Sheets)

Page 3

Link Styles Tutorial

Throughout this site and many other sites you see links with no underlines, and links that change when you put your mouse over them.

This is all done with CSS (Cascading Style Sheets), or commonly known as Styles.

Links have 5 states, although only 4 of the states are supported by the most popular browsers in use today.

The link states are:

Unvisited

The link to a page that has not been visited by you, it is not in your browser history.

Visited

The link to a page that has already been visited by you, it is in your browser history.

Hover

The temporary state of the link while your mouse is over the link.

Active

The temporary state of the link when you have clicked your mouse but have not yet moved off the page.

The remaining link state which we are not considering here is 'focus'.

The basic CSS to achieve the visual states of the links is:

a:link{
color: #0000FF;
text-decoration: none;
}

a:visited{
color: #9932CC;
text-decoration: none;
}

a:hover {
color: #DAA520;
text-decoration: underline;
}

a:active {
color: #FF0000;
text-decoration: none;
}

You can see that we set the text color and whether there is an underline or not for each of the 4 link states. The style rule property 'text-decoration' determines the underline display on the link, and a value of 'none' means no underline, while a value of 'underline' means the link has an underline.

If you leave the text decoration property out altogether, then the links will be underlined by default. When you are setting up a set of rules as above, it is a good idea to set in all states of the links every propery you are changing, otherwise you may not end up with the results you are expecting.

To make the above style rules work on your page, add them to the head section of your page inside <style> </style> tags. It is imperitive that the order of the link rules is the same as shown. That is - link, visited, hover, active.

That is all there is to it.

<style>
<!--
a:link{
color: #0000FF;
text-decoration: none;
}
a:visited{
color: #9932CC;
text-decoration: none;
}
a:hover {
color: #DAA520;
text-decoration: underline;
}
a:active {
color: #FF0000;
text-decoration: none;
}
-->
</style>

To change the color of the link text, change the hex color values in the style rules. To change the underline state, set text-decoration value to either 'none' or 'underline'.

You can also add extra properties to the rules, I have added a background color here. Notice that each property/value set ends with a semi-colon.

a:link{
color: #0000FF;
text-decoration: none;
background-color: #FFCC33;
}

You can also use some other values for text-decoration, but don't get too carried away.

Text-decoration values:

  • none

  • underline

  • overline

  • line-through

Just want to remove the underline from all your links and nothing else? Instead of using the full set of rules as above, use this simple rule in your head style tags:

a {text-decoration: none;}

This tells the browser that all <a ..> tags will have no default underline.

Some notes

Please do not confuse your users by making your links look the same as the text on the page. Most people expect to see all links underlined, unvisited links as blue, and visited links as purple. Make sure that when you remove the underlines, and change colors, that the links still have a different appearance from the page text - after all, you don't want to hide them entirely.

Netscape 4 browsers will not show the 'hover' state, so don't get upset when you find that it doesn't work in that browser. The latest Netscape 6 and 7 versions do show all link states, as do Internet Explorer from versions 4 upwards, and many other browsers.

A Further Refinement

Copy and pasting the above set of styles, or your own set of styles, into the head of each page is okay when you only have a few pages, but a better way to do this is to make the set of styles into a separate style sheet and link to it from each page. This way, you only have to change your styles in one file, and all of your pages that are linked to that file will show the changes.

To make a style sheet, copy and paste the first set of styles (without the <style> tags) to a new blank page - no html tags, just a blank sheet. Save this file as mystyles.css - it can be named anything, of course, but must have the extension .css.

In the head of your HTML pages, enter this line:

<link rel="stylesheet" href="mystyles.css" type="text/css">

Don't forget to upload the .css file, or nothing will happen.


[ CSS 1 | CSS 2 | CSS 3 | CSS 4 ]

  

[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]

 

Go to Top


Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline