You may have noticed some sites have links that change color or do not have an underline below them.
In HTML3.2, you could designate your LINK, VLINK, and ALINK colors in the opening BODY tag. This and more can be done using CSS.
The A refers to any link reference. Notice all your links start off as A HREF.
You can specify a different BACKGROUND color for each of the link types or add in a different text color for the hover. It all depends on what effect you want to show for each of them.
Example : to create the non-visited link to show as a blue text on a green background.
As seen in previous examples, command properties can be added into the same command area as long as they are separated by a semi-colon.
In the BODY area of the page code, the actual link tags are the exact same link tags in basic HTML coding. No special codes required for the CSS to affect them.
In HTML3.2, you could designate your LINK, VLINK, and ALINK colors in the opening BODY tag. This and more can be done using CSS.
|
<style type="text/css"> <!-- a:link {color: #0000ff;} a:visited {color: #ff0000;} a:active {color: #00FF00;} a:hover {background-color: #ffffff;} a {text-decoration: none;} --> </style> |
The A refers to any link reference. Notice all your links start off as A HREF.
- LINK defines the properties for an unvisited link.
- VISITED defines the properties for a visitied link.
- ACTIVE defines the properties of a currently active link.
- HOVER defines the properties when a mouse is over a link.
- unvisited links will show as BLUE text
- visited links show as RED text
- currently active links show GREEN text
- any links hovered over by a mouse will show a WHITE background behind the text
You can specify a different BACKGROUND color for each of the link types or add in a different text color for the hover. It all depends on what effect you want to show for each of them.
Example : to create the non-visited link to show as a blue text on a green background.
<style type="text/css">
<!--
a:link {background-color: #00FF00; color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none}
-->
</style>
<!--
a:link {background-color: #00FF00; color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none}
-->
</style>
As seen in previous examples, command properties can be added into the same command area as long as they are separated by a semi-colon.
In the BODY area of the page code, the actual link tags are the exact same link tags in basic HTML coding. No special codes required for the CSS to affect them.
Note : the HOVER property does not work in Netscape.

