shadowline
How do you ... create two link styles on the same page?
With the use of CSS, you are easily able to create a specific style for your page links. One question that seems to appear is... How do you create 2 or more different link styles on the same page? Here is an example that shows three different situations. One for normal full page links, the second for specific links, and the third for a group of links.

This would go into the HEAD section of your coding :
<style type="text/css">
a {text-decoration:none; color:#ff0000;}
a.testing {text-decoration:underline; color:#0000ff;}
.testing a {text-decoration:none; color:#c0c0c0;}
</style>

The first line will affect any normal link in your coding :
<a href="somepage.html"> text here </a>

The second line will affect individual links that specify that class in them :
<a href="somepage.html" class="testing"> text here </a>

The third line is for affecting a group of links such as in a DIV area :
<div class="testing">
<a href="somepage1.html"> text one here </a>
<a href="somepage2.html"> text two here </a>
<a href="somepage3.html"> text three here </a>
<a href="somepage4.html"> text four here </a>
</div>

The above shows only the main A tag being styled. You can also enter the specifics of LINK, ALINK, VLINK, and HOVER as well.

Example :
a.testing:hover {background-color:#00ff00;}
.testing a:hover {color:#ff0000;}
How do you ... create two link styles on the same page?
shadow

Advertise in the banner along the top, Click here!

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