Exit tutorial


HTML Tutorial
Cascading Style Sheet Tutorials
Link Styles
Sometimes you may want to have two kinds of links with each having separate link colors, visited link colors, and hover colors.

For example, you could create links of one color for pages on your site, and links of another color for off-site links. You may even want a rainbow of links! This is solved by creating a separate class of links for the second set. Here are two examples of this:

CSS Tutorials - this link goes to the CSS Stage Menu.
Microsoft - this link goes off this site to my Microsoft's site.

These links should be different colours. Run your mouse over each link and see they each change to a different colour. (Note: if the links look orange you've already visited that page. Also, hover colour doesn't work in older browsers)

Here's how it's done:

In your head section, you add the following for the first set:

<style type="text/css">
<!--
a:link { color: darkblue; }
a:visited { color: darkblue; }
a:hover { color: blue; text-decoration: none; }
-->
</style>

This is the style for the first set of links. The "text- decoration: none" removes the underlines. The hover is what color the link turns when your mouse is resting on the link. Naturally, you can change the colours.

To add another type of link that uses different colours, add the part in bold to the style tags:

<style type="text/css">
<!--
a:link { color: darkblue; }
a:visited { color: darkblue; }
a:hover { color: blue; text-decoration: none; }
a:link.tutorial {color: red; }
a:visited.tutorial {color: orange; text-decoration: none}
a:hover.tutorial {color: LIME; text-decoration: none}
 -->
</style>

As you can see, it's the same as before only using different colors, and there has been a ".tutorial" added to the selectors (the selectors are a:link, a:visited, and a:hover). By adding the .tutorial to the selector, you create a new class. To use this class, you then code the links you want to have that style with:

class="tutorial"

So your link would look like this:

<a class="tutorial" href="somepage.html">Some Page</a>

There now, that wasn't so bad was it?

[Back to the Stage 6 Index]