different link colors

[peanuts]

Hi all,

I have a problem and I really don't know how to solve it..

I have a site with multiple background colors and also multiple text colors.. Well not a problem ..

But My links I have set in the body tag to a certain color..

My problem is I want to change the link (vlink alink) color for a certain section .. How do I do this???

Greets,

Peanuts

[Husain]

You can do that using CSS. Here's how:

<style type="text/css">
<!--
.different {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #996699}
different.a:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0033FF}
different.a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #993300}
-->
</style>

I created a class in CSS. It is pretty easy if you do it in Dreamweaver. Then when you want to set a different link you have to modify the <p> tag (or any other tag that you are using. Example:

<p class='different'>My text with a differnt link style here.</p>

Hope this helps.

[htmlite]

Should it be "different.a" or "a.different" for the CSS declaration area? Thought it was the latter. Does it work either way?

[Husain]

I tried out both ways and it worked for me. However, I will find out what the standard way of writing this and let you know.

[Husain]

htmlite, you are right. The standard way of writing classes is a.different and NOT different.a

So the correct style sheet will be:

<style type="text/css">
<!--
.different {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #996699}
a.different:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0033FF}
a.different:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #993300}
-->
</style>

Peanuts, sorry if I have caused any inconvenience to you.

[iTec]

if you are using a.different then you would be better of putting <a class="different"... >link</a> instead of <p class="different"><a ... >link</a></p>

im not sure about IE, but i know with netscape that it wont recognise it if you do it as mentioned by husain.

[peanuts]

Thanks all..

I knew it was something like that but couldn't find what it was precisely.

Greets

Peanuts

[peanuts]

It's not working for me

I have :

.text1{
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		font-size: 11px; 
		color: white;
	}
	a.text1:link{
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		font-size: 11px; 
		color: white;
	}
	a.text1:hover{
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		font-size: 11px; 
		color: white;
	}

And in the body..
LINK="black" VLINK="black" ALINK="black"

<td style='background:black;mso-shading:white;mso-pattern:solid black' CLASS="text1">
			<A Href="update.php?id=4">edit</a>
		</td>

And still my links end up black..

Greets,

Peanuts

[Husain]

Try removing the link settings in the body tag. That should solve your problem.

[Lee2k]

I cannot seem to get this. This is my .css file.

/* Forum categories */
font.category { font-size : 12px; letter-spacing: 1px; font-weight : bold; text-decoration : none; line-height : 150%; color : #0176BC }
a.category { text-decoration: none; color : #0176BC }
a:hover.category { text-decoration: underline }

In my index file I did:
include('file.css');

Then in the body I did this:

<td bgcolor="#DEE3E7"><FONT class="cat"><a href="index.php?catid=<? echo $cat ?>"><B><? echo $namecat ?></B></a></font></td></tr>

I've tried a few variations on this, I've also put the css directly in the index file rather then calling for it. (just to messy for me though) And the font size and links were just default colors and heights.

[Lee2k]

nm, I got it!

[SlaveToTheMan]

OK, I'm having the problem mentioned by iTec.

I have a menu bar and the links in that menu bar should be white where as all other links should be red and blue for visited and link.

Here is my style sheet:

/*********************/
A:LINK { color : #336699;}
A:VISITED { color : #990033;}
A:HOVER { color : Olive; text-decoration : none;}

A.navBar:LINK { color : FFFFFF; }

.navBar { font-family : Arial, Helvetica, sans-serif; background-color : 003300; color : FFFFFF; font-size : 8pt; }
/**********************/

Now I have the menu bar table cell set to class "navBar." Now, since I have "A.navBar:LINK" in my css, then a link inside the menu bar should be white! The only problem is that I HAVE TO set this class inside the anchor tag (ie <a href="asdf" class="navBar">) to get it to work. Otherwise it just takes the color indicated by "A:LINK."

Why? Is this a bug in IE and Netscape? I guess what is happening is that the class style determined in the table does not get inherited by the anchor tag even though it is within the table. Therefore it doesn't realize it should obey "A.navBar:LINK" rule? If this is true, then why does the anchor happily accept the other attributes of "navBar" class (eg fonts)?

Come on you style sheet maniacs . . . what gives here?

[htmlite]

A.navBar
specifies when the class navBar is used in a link tag.

.navBar
specifies when the class navBar is used in a tag.

Link areas are kinda special for some reason, thus the different specifications are set for them, thus the class must be used in the actual A tags for them.

Or maybe the browser companies got together one day to figure out how to put a kink in our coding techiques. Inheritance would just be too kind to us, especially cross-brower.

[SlaveToTheMan]

lol .. . yeah, it was probably the only they collaborated on!

thanks