# Multiple CSS link colors..



## yuppicide (Jul 21, 2005)

I've looked on websites and I can't get this working! I want multiple CSS link colors on one page.

I will post the code below if someone could help.

There is a menu. Find the text "main page" in my code, it's near the top. That whole menu I want the link to be in white and when you hover over it'll underline. I have marked all of them as class="white".

Below that is a different menu. Search for "dresses" in my code. From "Dresses" all the way down to "Tunics" I want those links to be in #005083 and when hovering over it'll underline. I have marked these as class="blue".

I haven't created those classes, those are just to show those are what colors I want what.

Your help is most appreciated. This is driving me crazy. Here's the code:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sonali Corporation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
	font-family: tahoma;
	font-size: 11px;
	color: #414141;
}
body {
	background-color: #A2CCFF;
        margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;        
}

.style1 {color: #ffffff}
a {
	font-size: 11px;
	color: #ffffff;
}
.style2 {color: #005083}
.style3 {color: #B7B7B7}
A:link {text-decoration: none;}
A:visited {text-decoration: none;} 
A:active {text-decoration: none;}
A:hover {text-decoration: underline;}

-->
</style>
</head>
<body>
<table width="765" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="765" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
      <tr>
        <td valign="top"><table width="269" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/title.gif" width="269" height="119" border="0"></td>
          </tr>
          <tr>
            <td><img src="images/spacer.gif" width="1" height="27"></td>
          </tr>
          <tr>
            <td><table width="204" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="index.htm">Main Page</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="faq.htm">Frequently Asked Questions</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="showrooms.htm">Showrooms</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="reps.htm">Representatives</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="request.htm">Request A Catalog</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="dir.htm">Office/Warehouse Directions</a></strong></td>
              </tr>
              <tr>
                <td height="28" background="images/button.gif" class="white"><img src="images/spacer.gif" width="27" height="1"><strong><a href="contact">Office Contacts</a></strong></td>
              </tr>

			  <tr>
            <td><img src="images/spacer.gif" width="1" height="27"></td>
          	  </tr>
            </table></td>
          </tr>
          <tr>
            <td><table width="204" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td background="images/partner_t.gif" height="34"><img src="images/spacer.gif" width="27" height="8"><strong>View Our Catalog</strong></td>
              </tr>
              <tr>
                <td background="images/gr1.gif"><table width="204" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="25"><img src="images/spacer.gif" width="20" height="8"></td>
                    <td width="175"><table width="175" border="0" cellspacing="5" cellpadding="0">
                      <tr>
                        <td class="blue"><a href="">Dresses</a></td>
                      </tr>
                      <tr>
                        <td class="style2">Bermuda Shorts</td>
                      </tr>
                      <tr>
                        <td class="style2">Bikini Wraps</td>
                      </tr>
                      <tr>
                        <td class="style2">Capris</td>
                      </tr>
                      <tr>
                        <td class="style2">Kaftans</td>
                      </tr>
                      <tr>
                        <td class="style2">Men's Shirts</td>
                      </tr>
                      <tr>
                        <td class="style2">Pareos</td>
                      </tr>
                      <tr>
                        <td class="style2">Sarongs</td>
                      </tr>
                      <tr>
                        <td class="style2">Shawls</td>
                      </tr>
                      <tr>
                        <td class="style2">Skirts</td>
                      </tr>
                      <tr>
                        <td class="style2">Tunics</td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td><img src="images/part_bottom.gif" width="204" height="7"></td>
              </tr>
               <td><br><h2>About Us</h2><hr><br>Founded in 1989 blah blah blah blah and some more stuff would go here eventually. Please think of something catchy to write. I beg of you smart people. Hurry time is running out.
                      <p>I'm not really sure what to write here, but I'm sure someone else would. This is so people can read we've been around for a long time and know we're not going anywhere.</p>
                      <p>Blah bluh bluh blah blah blah and so fourth. Please fill me up with something useful.</p></td>
            </table></td>
          </tr>
        </table></td>
        <td valign="top"><table width="496" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><table width="496" border="0" cellspacing="0" cellpadding="0" bgcolor="#A2CCFF">
              <tr>
                <td width="279"><img src="images/spacer.gif" width="1" height="45"></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td><img src="images/header.jpg" width="496" height="175" border="0"></td>
          </tr>
          <tr>
            <td><table width="445" border="0" align="center" cellpadding="0" cellspacing="0">
			  <tr>
                <td><img src="images/spacer.gif" width="1" height="20"></td>
              </tr>

			  <tr>
                <td><img src="images/spacer.gif" width="1" height="20"></td>
              </tr>
              <tr>
                <td><img src="images/main.jpg" width="449" height="583" border="0" align="left"></td>
              </tr>
			  <tr>
                <td><img src="images/spacer.gif" width="1" height="15"></td>
              </tr>
            </table></td>
          </tr>
		  </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="http://www.templatesfreelance.com"><img src="images/footer.gif" width="765" height="22" border="0"></a></td>
  </tr>
  <tr>
    <td>
      <table width="766" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="421" align="left" class="style1">© copyright 2006</td>
		  <td width="10"><img src="images/spacer.gif" width="1" height="20"><img src="images/spacer.gif" width="1" height="1" border="0"></td>
          <td width="335" align="right" class="style1">Web Design by Yuppicide using TemplatesFreeLance.Com</td>
        </tr>
      </table><img src="images/spacer.gif" width="1" height="1" border="0"></td>
  </tr>
</table>
<img src="images/spacer.gif" width="1" height="1" border="0">
</body>
</html>
```


----------



## v-six (Sep 12, 2004)

If you want to have a certain part of a page have different link properties, you need to set a different style with its own a:link, a:visitied, a:active, and a:hover properties.

Example:
this is global (will affect everything on your site)

a:link, a:visited, a:active {
color: #663300;
text-decoration: underline;
}

a:hover {
color: #663300;
text-decoration: none;
}

this is local (will only affect the div with id _navigation_


#navigation a:hover {
color: #333333;
text-decoration: none;
}

Let me know if this helps


----------



## yuppicide (Jul 21, 2005)

Thanks for the help. I got things fixed.


----------

