How do I apply different styles to anchors on a single page?

This is the default style link.

This is the menu style link.

This is the info style link.

This is the alert style link, followed by a second link.

There are actually two ways of getting this effect, via block level or element level style application. The links above use the element style method, which is why in the alert style paragraph, only the first link has the fancy style applied to it. If the block style method were used, both links would have had the effect without coding each anchor separately.

A few other things to remember:

• Inheritance means that the order that you place the styles in the list may be important. Styles that appear further down the list will override earlier attributes. This seems especially critical with the a:hover property.
• Inheritance is a bad joke with Netscape 4, so you will frequently find yourself redefining font-family and font-size values, otherwise the text will appear in the default size, colour and font, usually Times New Roman.
• The hover attribute for links is not supported by Netscape 4.
• The border attribute is supported in a somewhat bizarre, haphazard fashion in Netscape 4. Anchors (<a href="">) with a border around them will not work. Similarly, if certain style elements are applied to <form> buttons, Netscape 4 will ignore the style, but place a little square blob under the button.

Block level

Using this method, the style is applied to the block level element, <p> </p>, which means that any anchors within the paragraph will have that style applied to them. Note the syntax for the style elements:

a:link 
{
text-decoration:underline;
font-family:arial,helvetica;
color:#ff0000;
}
a:visited 
{
text-decoration:underline;
font-family:arial,helvetica;
color:#000000;
}
a:active 
{
text-decoration:underline;
font-family:arial,helvetica;
color:#66CC99;
}
a:hover 
{
text-decoration:underline overline;
font-family:arial,helvetica;
color:#ff0000;
}
.alertstyle a:link 
{
font-family:verdana,arial,helvetica;
text-decoration:underline;
color:#ff0000;
font-weight:bold;
background-color:#ffff00;
}
.alertstyle a:visited 
{
font-family:verdana,arial,helvetica;
text-decoration:none;
color:#000000;
font-weight:normal;
background-color:#cccccc;
}
.alertstyle a:active 
{
font-family:verdana,arial,helvetica;
text-decoration:underline;
color:#ff0000;
font-weight:bold;
background-color:#ffff00;
}
.alertstyle a:hover 
{
font-family:verdana,arial,helvetica;
text-decoration:underline overline;
color:#ffffff;
font-weight:bold;
background-color:#0000ff;
}
.menustyle a:link 
{
text-decoration:none;
color:#000000;
background-color:#c0c0c0;
padding:2px;
border:outset 2px #808080;
}
.menustyle a:visited 
{
text-decoration:none;
color:#000000;
background-color:#c0c0c0;
padding:2px;
border:outset 2px #808080;
}
.menustyle a:active 
{
text-decoration:none;
color:#000000;
background-color:#c0c0c0;
padding:2px;
border:outset 2px #808080;
}
.menustyle a:hover 
{
text-decoration:none;
color:#ffffff;
background-color:#000000;
padding:2px;
border:outset 2px #808080;
}
.infostyle a:link 
{
text-decoration:underline;
color:#808080;
padding:2px;
border:solid 1px #000000;
}
.infostyle a:visited 
{
text-decoration:underline;
color:#808080;
}
.infostyle a:active 
{
text-decoration:underline;
color:#0000ff;
}
.infostyle a:hover 
{
text-decoration:underline;
color:#66CC99;
color:#ffffff;
padding:2px;
border:solid 1px #000000;
background-color:#ff0000;
}


<p>This is the <a href="?style1" target="_self">default style</a> link.</p>
<p class="menustyle">This is the <a href="?style2" target="_self">menu style</a> link.</p>
<p class="infostyle">This is the <a href="?style3" target="_self">info style</a> link.</p>
<p class="alertstyle">This is the <a href="?style4" target="_self"> alert style</a> link,
followed by a <a href="?style4" target="_self"> second link</a>.</p>

Element level

Using this method, the style is applied at the element level, <a> </a>, which means that each anchor tag must have the style applied individually. This method is useful if you only have a few alements that need to have a seperate style applied. beware of inheritance issues, which could introduce fonts, colours and styles that were applied to the default element. Note the syntax for the style elements:

a:link 
{
text-decoration:underline;
font-family:verdana,arial,helvetica;
color:#ff0000;
}
a:visited 
{
text-decoration:underline;
font-family:verdana,arial,helvetica;
color:#000000;
}
a:active 
{
text-decoration:underline;
font-family:verdana,arial,helvetica;
color:#66CC99;
}
a:hover 
{
text-decoration:underline overline;
font-family:verdana,arial,helvetica;
color:#ff0000;
}
a.alertstyle:link 
{
font-family:verdana,arial,helvetica;
text-decoration:underline;
color:#ff0000;
font-weight:bold;
background-color:#ffff00;
}
a.alertstyle:visited 
{
font-family:verdana,arial,helvetica;
text-decoration:none;
color:#000000;
font-weight:normal;
background-color:#cccccc;
}
a.alertstyle:active 
{
font-family:verdana,arial,helvetica;
text-decoration:underline;
color:#ff0000;
font-weight:bold;
background-color:#ffff00;
}
a.alertstyle:hover 
{
font-family:verdana,arial,helvetica;
text-decoration:underline overline;
color:#ffffff;
font-weight:bold;
background-color:#0000ff;
}
a.menustyle:link 
{
text-decoration:none;
color:#000000;
background-color:#c0c0c0;
padding:2px;
border:outset 2px #808080;
}
a.menustyle:visited 
{
text-decoration:none;
color:#000000;
background-color:#c0c0c0;
padding:2px;
border:outset 2px #808080;
}
a.menustyle:active 
{
text-decoration:none;
color:#000000;
background-color:#c0c0c0;
padding:2px;
border:outset 2px #808080;
}
a.menustyle:hover 
{
text-decoration:none;
color:#ffffff;
background-color:#000000;
padding:2px;
border:outset 2px #808080;
}
a.infostyle:link 
{
text-decoration:underline;
color:#808080;
padding:2px;
border:solid 1px #000000;
}
a.infostyle:visited 
{
text-decoration:underline;
color:#808080;
}
a.infostyle:active 
{
text-decoration:underline;
color:#0000ff;
}
a.infostyle:hover 
{
text-decoration:underline;
color:#66CC99;
color:#ffffff;
padding:2px;
border:solid 1px #000000;
background-color:#ff0000;
}


<p>This is the <a href="?style1" target="_self">default style</a> link.</p>
<p>This is the <a href="?style2" target="_self" class="menustyle">menu style</a> link.</p>
<p>This is the <a href="?style3" target="_self" class="infostyle">info style</a> link.</p>
<p>This is the <a href="?style4" target="_self" class="alertstyle"> alert style</a> link,
followed by a <a href="?style4" target="_self"> second link</a>.</p>