Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page
Search the Web

cascading style sheet example html links (making alternative links and how to remove underline from links)
 

stylesheets and alternative links

It can become necessary to add alternative links in addition to normal links, for instance a document with a 'navigation panel' which has a different background color may require links to be a lighter color than the links in the main document, or have a completly different style, removing the underline from links etc...
the example below illustrates how to set up the main document links.
whilst the link colors are still set in the body tag for the benefit of users that have browsers that are incomatible with stylesheets or simply have css disabled, the style commands in this example describe some of the effects that can be achived when applying stylesheets to links 

<HEAD>
 <STYLE>
  A:link {
          color: #0000FF;
          text-decoration: underline;
          background: transparent;
 }

  A:active {
            color: #FF0000;
            text-decoration: none;
            background: #FFFF00;
 }

 A:visited {
            color: #9900FF;
            text-decoration: line through;
            background: transparent;
 }

 A:hover {
          color: #FF0000;
          text-decoration: overline;
          background: transparent;
 }

 </STYLE>
</HEAD>
<BODY link=#0000FF alink=#FF0000 vlink=#9900FF>
both the body tag and the embedded stylesheet will make links blue, active links red and visited links purple.
The additional properties declared in the stylesheet give active links a yellow background, a strong contrast to their red color, the underline is also removed with the 'text-decoration: none;' statement. The stylesheet makes visited links purple with a line through and links change to red in color and are overlined as the cursor is passed over them.

To make alternative links, a class is added to each of the link attributes. 

<HEAD>
 <STYLE>
 A:link {
         color: #0000FF;
 }

 A:active {
           color: #FF0000;
 }

 A:visited {
            color: #9900FF;
 }

 A:hover {
          color: #FF0000;
 }


 A.newlink:link {
                 color: #FFFFFF; 
 }

 A.newlink:active {
                   color: #FF3300;
 }

 A.newlink:visited {
                    color: #00FF00;
 }

 A.newlink:hover {
                  color: #FFFF00;
 }

 </STYLE>
</HEAD>
<BODY link=#0000FF alink=#FF0000 vlink=#9900FF>
In the example above the class 'newlink' is used to specify alternative links, for the sake of clarity only the colors have been specified but of course text-decoration, background colors or any valid css properties could be added

home
home
 		next: stylesheets & borders
previous: stylesheets & html forms

html tutorial css tutorial javascript webmaster articles link exchange

css tutorial