Links

There are a couple of ways to get your link style rules to apply to only the links you want them to. The first one is to set up a tag dependent class with the link pseudo-classes. You remember that from page 2 of "Syntax Basics" don't you? It goes like this:

a.myclass:link{
 color:red;
}
a.myclass:visited{
 color:green;
}
a.myclass:hover{
 color:blue;
}
a.myclass:active{
 color:yellow;
}

All states of the link have to be given the same class name. You can choose a class name that is descriptive of its intended purpose such as "main" or "footer" to make it easier to keep them straight. Then you just need to apply them to the anchor tag like you would any other class.

<a href="#" class="myclass">Link</a>

Another way to have different links in different page sections is to set them up contextually. That is so the link has to be nested inside other tag(s) before the styles will apply. A good example of this would be inside of paragraphs or tables. The code would go like this:

p a:link{
 color:red;
}
p a:visited{
 color:green;
}
p a:hover{
 color:blue;
}
p a:active{
 color:yellow;
}

The only time this link style would apply is if the link were inside of a paragraph. The link can be as deeply nested inside of other tags as you wish. Just remember to separate each tag in the selector with a space and to put them in the order they will be used, otherwise the style won't work. An example of the above code being used goes like this:

<p>Blah blah blah...<a href="#"> Link </a>Blah blah blah...</p>

What I like about the link styles is that it's the one that comes closest to being animated without the use of a scripting language such as Java script. The style can even be used with a dead link to give text some "pop". Because of the different pseudo-classes or states associated with the anchor tag, you can get creative and have "fun" with this one. Just mouse over the active words in this paragraph to see some examples of what I'm talking about. View the source code to see how I made it work. Also note that there is no link underlining with these examples. Since I hadn't specifically declared it in my style rules for these, it has to be inherited from other link style rules.

Support us by supporting our advertisers!



© 2004 Terry Lamrouex