shadowline
Text Style << Link Style >> Background Style
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.

<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.
The example above shows the CSS link properties I've used for HTMlite. When a visitor comes to the site,
  • 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
The A command actually affects ALL the link properties. In this case, text-decoration: none eliminates the underline or border from showing.

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>

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.
Text Style << Link Style >> Background Style
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow