Page 1 of 1

Changing the color of hrefs

Posted: Mon Jun 07, 2010 9:52 pm
by JackD
I tried to find this by searching the past questions, but couldn't. I need to change the color of a displayed link without affecting the color of others. The main URL is http://www.mybfl.com. In the sidebar, we want the links to be displayed in white, rather than the default blue. We also want the visited links displayed in white. So we have the following code:

Code: Select all

<style type="text/css" media="screen"> 
A:link { color: white; }
A:visited { color: white; }
A:hover { color: white; background-color: gray; text-decoration: #000000;}
A:active { color: white; } 
</style>
That part works fine. However, in the body, where we have code such as:

Code: Select all

<td width="239" align='right' border="0"><fieldset class="fieldsetaddressbox"><center><h3><u>North Point Mall:<br></b></u>  
     </h3><Font size="+1">
       	Monday - Saturday<br>
        10 am - 9 pm<br></font>
        <font size="-1">935 North Point Drive
        <br />Alpharetta, GA 30022<br>
        (770) 475-7768<br>
		<a href="mailto:NorthPoint@mybfl.com">NorthPoint@mybfl.com</a></font>
        </center>
        <center><p>
        <a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=935+North+Point+Drive+Alpharetta,+GA+30022&sll=34.051474,-84.282392&sspn=0.034488,0.077162&ie=UTF8&hq=&hnear=935+North+Point+Drive+Alpharetta,+GA+30022&ll=34.051474,-84.282392&spn=0.019601,0.025663&z=14&output=embed&iwloc=near" style="text-decoration:none"><u>Click for Map</u>&nbsp;<img src="images/scroll_icon.gif" width="30" height="30" border="0" align="absbottom"/></a>
        </p></center></fieldset>
     </td>
both the "<a href=..." links is also displayed in white. The body is a light yellow background and the links in white disappear into the background. We have tried a lot of variations such as class, font, etc. to make these links displayed in blue. Is there a way to do that?

Thanks

Re: Changing the color of hrefs

Posted: Mon Jun 07, 2010 11:14 pm
by michaeru

Code: Select all

<style type="text/css" media="screen">
A:link { color: white; }
A:visited { color: white; }
A:hover { color: white; background-color: gray; text-decoration: #000000;}
A:active { color: white; }
</style>
 
This will make all anchors white. You should try adding IDs or Classes.

Code: Select all

<style type="text/css">
.sample_class a { color: #FFF; }
</style>
This will make the anchors with the class sample_class white.

Hope that helped, and suggestion. Try to use external CSS. Also try using divs instead of tables. And try to match the size to fit majority of the used resolutions (800 x 600 (Use sumthing like 780 x Any Height) or 1024 x 768 (Use sumthing like 980 x Any Height)).

Re: Changing the color of hrefs

Posted: Tue Jun 08, 2010 11:19 am
by pickle
Moving to the CSS forum.

Re: Changing the color of hrefs

Posted: Tue Jun 08, 2010 7:42 pm
by JackD
Thanks for the suggestions. We actually do use external css and html files, it just doesn't show in this example. We'll look into divs instead of tables, and perhaps later you can explain what you meant by your comments on the resolution.

In the meantime, I definitely did not understand your answer as to how to get selected anchors a different color. We have them all set to white in our example, and what selected anchors to be a different color, eg, blue. We have tried different syntax combinations inside <a> such as

Code: Select all

<style type="text/css">
.sample_class a { color: blue; }
</style>
<a class=sample_class; href xxxxxx;>
but none have allowed us to change the anchor from white to blue. What are we missing?

Re: Changing the color of hrefs

Posted: Thu Jun 17, 2010 11:38 pm
by grado
use external CSS file, write separately, write the css file in the same page will easy to make css conflict.

Re: Changing the color of hrefs

Posted: Mon Jun 21, 2010 8:21 pm
by Jimania
simply create a unique class for that particular link. it's very easy after that!