to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 
COOL TIPS >
Link Properties    

How To Change Appearance of Text Links & Make them more Dynamic

With Links in HTML you tend to get the following presets

Links (no yet visited) are coloured Blue (#0000FF in RCB) & underlined

e.g. Home

Visited links are rendered an olive grey type colour (#606820)

e.g. Home

Obviously it is an easy matter of changing the basic colour of links using the <font> with the colour attribute

e.g.
<a href="http://www.fluffbucket.com">
<font color="#FF0000" face="arial">fluffbucket</font>
</a>

gives a red link in arial font like this fluffbucket (not active)

However you can't alter the visited link by this method and how do you get the link to change colour and style when your mouse "hovers" over it or once activated (as our sites links are)

One solution is to use attributes in the <body> tags

But you can use the following attributes in the body tag our link starts yellow. When you click on the link it becomes green (i.e. it is active) and once you have visited the site it becomes red

<body link=yellow alink=green vlink=red>
<a href="http://www.fluffbucket.com">
fluffbucket
</a>
</body>

This works for both MSIE and Netscape but is being being phased out of HTML

The other solution is to use a style sheet

(for morel details on style sheets we have a tutorial in our HTML tutorial section)

Essentially you can define not just colours but other attributes for links too!!. In the following example of a Document-Level Style sheet The links are set upto change colour as above (i.e. yellow > green > red). However as your mouse hovers over it it turns blue.



<html>
<head>
<style>
<!--
a:link {color: yellow}
a:active {color: green}
a:hover {color: blue}
a:visited {color: red}
-->
</style>
<body>
<a href="http://www.fluffbucket.com">
fluffbucket
</a>
</body>
</html>

you can also use these in an external style sheet as described elsewhere

Unfortunately not all style sheet tags are universal and in this case a:hover will not work for Netscape browsers

You can expand things further

e.g.

a:link
{ font: Arial;
text-decoration: none;
color: "red"}

will give rise to active links being in Arial font, red in colour and not underlined (these and other style sheet properties can be found in the style sheet properties section of our HTML library)

(composer and frontpage express users should use add HTML functions to fiddle with these)

back to top

back to Index
BACK TO INDEX