This is most likely a simple problem but I would appreciate some help none the less. What I want to do is seemingly simple enough, have different colored links on the same page. More specifically I want the links on the side of the page to be white and the links on the top to be black. Here is my style.css file: td { text-align: left; vertical-align: top; font-family:Tahoma; font-size:12px; color:black; } form { margin:0px; } a { font-family:Tahoma; font-size:13px; text-decoration: none; font-weight: bold; color:black; } A:Hover { color : black; text-decoration : underline; } H1 { color: black; font-weight: bold; font-size : 16px; } Code (markup): And here is my index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Redline Auto Service: Home</title> <META NAME="Description" CONTENT="Redline Auto Service: Lansing Michigan Auto Service and Repair for Foreign and Domestics"> <META NAME="Keywords" CONTENT="lansing auto repair, michigan auto service, lansing, car repair lansing, VW repair, car repair michigan, auto glass brake service lansing, audi, engine, transmission, volkswagen, BMW"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="date" CONTENT="11/9/2006"> <META NAME="author" content="randstechnicalassistance@gmail.com"> <META NAME="rating" content="general"> <META NAME="classification" content="Vehicle service and repair"> <META NAME="abstract" content="auto repair, car service, auto repair service"> <link rel=stylesheet type="text/css" href="style.css"> </head> <body background="img/background.jpg"> <center><table width="765" height="100%" cellpadding="0" cellspacing="0" border="0" background="img/mainbackground.jpg"><tr valign="top"><td> <table width="764" height="97" cellpadding="0" cellspacing="0" border="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2"><img src="img/logo.jpg" alt="Redline Auto Service: Lansing Auto Service and Repair in Michigan" width="248" height="117"></td> <td height="65" valign="top"><a href="index.html"><img src="img/home-img.jpg" alt="Home: Redline Auto Service: Lansing Auto Service and Repair in Michigan" width="100" height="60" border="0"></a></td> <td valign="top"><a href="about_us.html"><img src="img/about-us-img.jpg" alt="About Us: Redline Auto Service: Lansing Auto Service and Repair in Michigan" width="100" height="60" border="0"></a></td> <td valign="top"><a href="services.html"><img src="img/services-img.jpg" alt="Services: Redline Auto Service: Lansing Auto Service and Repair in Michigan" width="100" height="60" border="0"></a></td> <td valign="top"><a href="specials.html"><img src="img/contact-us-img.jpg" alt="Specials: Redline Auto Service: Lansing Auto Service and Repair in Michigan" width="100" height="60" border="0"></a></td> <td valign="top"><a href="towing.html"><img src="img/contact-us-img.jpg" alt="Towing Service: Redline Auto Service: Lansing Auto Service and Repair in Michigan" width="100" height="60" border="0"></a></td> </tr> <tr> <td height="21" align="left"><a href="index.html" class="menu">Home</a></td> <td align="left"><a href="about_us.html" class="menu">About Us</a></td> <td align="left"><a href="services.html" class="menu">Services</a></td> <td align="left"><a href="specials.html" class="menu">Specials</a></td> <td align="left"><a href="towing.html" class="menu">Towing Service</a></td> </tr> </table></td> </tr> </table> <table width="764" height="42" cellpadding="0" cellspacing="0" border="0"> <tr valign="top"> <td width="169"><img src="img/left1.jpg" width="169" height="42" border="0" alt=""></td> <td width="100%" background="img/left1bg.jpg"><img src="img/left1bg.jpg" width="20" height="42" border="0" alt=""></td> </tr> </table> <table width="764" cellpadding="0" cellspacing="0" border="0"> <tr valign="top"> <td width="150"> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="testimonials.html">Leave Feedback</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="hours_map_payment.html">Hours, Map & Payment Options</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="friends_family.html">Friends & Family Referral Program</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="for_sale.html">Cars For Sale</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="q_a.html">Q & A</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="whats_new.html">What's New At Redline Auto Service</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> <a href="site_map.html">Site Map</a><BR> <img src="img/menudivider.jpg" width="150" height="5" border="0" alt=""><BR> </td> <td width="5"> </td> <td width="750"> <p align="justify"><font size="4"><i><b>Welcome to Redline Auto Service</b></i></font></p> <hr width="100%"> <img src="img/frontredline.jpg" alt="Redline Auto Service"> <p align="center"><font size="4" color="black"><i>"Personalized Service from Experts Who Care"</i></font></p> <hr width="100%"> <center>© Redline Auto Service</center> <td width="10"> </td> </tr> </table> </td></tr></table></center> <BR><BR><BR><BR> <BR><BR><BR><BR><BR> </body> </html> Code (markup): All I simply want is the links on the side of the page to be white and the links on the top of the page to be black. Any help anyone can offer me would be appreciated.
Use classes. a { Â font-family:Arial,Verdana,sans-serif; color:#808000; Â text-decoration:none; font-size:10pt; Â font-weight:bold; } a:hover { font-family:Arial,Verdana,sans-serif; background-color:#ffff99; Â color:#808000; Â text-decoration:none; font-size:10pt; Â font-weight:bold; } .a1 { font-family:Arial,Verdana,sans-serif; color:#ffffff; text-decoration:underline; font-size:8pt; font-weight:normal; } .a1:hover { font-family:Arial,Verdana,sans-serif; background-color:#ffff99; color:#000000; text-decoration:none; font-size:8pt; font-weight:normal; } When coding add the class info <a class=a1 href="sitemap.htm">Site Map</a>
Make a different class for each of your link types and then specify it in the HTML. .link1 a:link { color and so on .link2 a:link { color and other things Then in your layout you can either give the individual links the colour or apply the class to the whole td or div and it should give you the look you want.