Different Hyperlink CSS on a page

J1mmy · 03-05-2007, 12:50 AM

I have implemented two different CSS rules for one page, but I cant make them work at the same time. They are

Code:

.footerlinks
	A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
	A:link {color: #666666;}
	A:visited {color: #666666;}
	A:hover {text-decoration: none; color: #000000;}

	
.emaillinks
	A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
	A:link {color: #6633CC;}
	A:visited {color: #6633CC;}
	A:hover {color: #000000;}

Evertime I set the selected text to .emaillinks, the .footerlinks changes to .emaillinks too. It seems to be one or the other.

How can I use them both?

VIPStephan · 03-05-2007, 12:57 AM

Looks like you're confusing CSS with JavaScript… (or is it just me because I've just studied JS the whole day?)
The correct way of writing it is:

Code:

.footerlinks a {font-family:Arial, Helvetica, sans-serif; font-size:small;color: #666;}
.footerlinks a:visited {color: #666;}
.footerlinks a:hover {text-decoration: none; color: #000;}
.emaillinks a {font-family:Arial, Helvetica, sans-serif; font-size:small; color: #63C;}
.emaillinks a:visited {color: #63C;}
.emaillinks a:hover {color: #000;}

Not the shorter/longer code is the problem but you have to specify a selector for every rule.

Arbitrator · 03-05-2007, 01:02 AM

Your current (effective) code:

Code:

.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
	A:link {color: #666;}
	A:visited {color: #666;}
	A:hover {text-decoration: none; color: black;}

	
.emaillinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
	A:link {color: #63C;}
	A:visited {color: #63C;}
	A:hover {color: black;}

Probably what you want:

Code:

.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}

	
.emaillinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.emaillinks A:link {color: #63C;}
.emaillinks A:visited {color: #63C;}
.emaillinks A:hover {color: black;}

Increased efficiency:

Code:

A {font-family:Arial, Helvetica, sans-serif; font-size:small;}

.footerlinks A:link, .footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}
	
.emaillinks A:link, .emaillinks A:visited {color: #63C; }
.emaillinks A:hover {color: black;}

Context: VIPStephan beat me to the post. Posting anyway since I feel it’s still informative.

J1mmy · 03-05-2007, 10:07 AM

Thanks alot!

What method should I use to implement it to my text. What I am doing now is highlighting the text, selecting the class, emaillinks for eg, and then linking it. But sometimes I still get the footerlinks CSS.

My page properties have my footerlink CSS applied to it, I think thats the problem, but it wont let me change it. It tells me its controlled by an external CSS sheet.

karinne · 03-05-2007, 02:33 PM

It could also be

Code:

a.footerlinks {font-family:Arial, Helvetica, sans-serif; font-size:small;}
a.footerlinks:link {color: #666;}
a.footerlinks:visited {color: #666;}
a.footerlinks:hover {text-decoration: none; color: black;}

a.emaillinks {font-family:Arial, Helvetica, sans-serif; font-size:small;}
a.emaillinks:link {color: #63C;}
a.emaillinks:visited {color: #63C;}
a.emaillinks:hover {color: black;}

And you html would be

Code:

<a href="..." class="footerlinks">linky</a>
or
<a href="..." class="emaillinks">email link</a>

VIPStephan · 03-05-2007, 04:38 PM

Quote:

Originally Posted by J1mmy

Thanks alot!

What method should I use to implement it to my text. What I am doing now is highlighting the text, selecting the class, emaillinks for eg, and then linking it. But sometimes I still get the footerlinks CSS.

My page properties have my footerlink CSS applied to it, I think thats the problem, but it wont let me change it. It tells me its controlled by an external CSS sheet.

What program are you using? Can we see your entire code please?

J1mmy · 03-05-2007, 04:59 PM

I am using Dreamweaver.

The page code is as follows:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="New/CSSmail.css" rel="stylesheet" type="text/css" />
<link href="New/CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: 595959;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
	color: 000000;
}
a:active {
	text-decoration: underline;
	color: #6633CC;
}
-->
</style></head>

<body>
<table width="850" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="51" height="15"></td>
    <td width="230"></td>
    <td width="65"></td>
    <td width="228"></td>
    <td width="72"></td>
    <td width="130"></td>
    <td width="74"></td>
  </tr>
  <tr>
    <td height="73"></td>
    <td valign="top" class="emaillinks"><a href="http://google.com" class="footerlinks">emaillinks go here</a></td>
    <td>&nbsp;</td>
    <td valign="top" class="footerlinks"><a href="html://google.com">footerlinks go here</a> </td>
    <td>&nbsp;</td>
    <td valign="top"><a href="http://google.com" class="emaillinks">link2</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="56"></td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

My CSS

Code:

.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}
	
.emaillinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.emaillinks A:link {color: #63C;}
.emaillinks A:visited {color: #63C;}
.emaillinks A:hover {text-decoration: none; color: black;}

karinne · 03-05-2007, 05:15 PM

You have

Code:

<td valign="top" class="emaillinks"><a href="http://google.com" class="footerlinks">emaillinks go here</a></td>

footerlinks is overriding the emaillinks in this instance.

J1mmy · 03-06-2007, 07:44 PM

Is this code written properly?

Code:

<a href="http://paypal.com/" class="weblinks">contact us</a>.

karinne · 03-06-2007, 07:47 PM

looks ok to me. why?

J1mmy · 03-06-2007, 07:54 PM

Becuase the CSS rule isnt working when I try to preview the page in the browser. I think something is overriding it somewhere. How can I find out if I have a CSS rule for links on the page already?

karinne · 03-06-2007, 07:59 PM

Do you have something like a.weblinks in your CSS?

Do you have a link we can see?

J1mmy · 03-06-2007, 08:09 PM

The CSS is on a seperate CSS file, I think there might be a CSS on that actual page though. How can I find this out?

Yes, the .weblink is there, in the CSS:

Code:

.weblinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.weblinks A:link {color: #3567cc;}
.weblinks A:visited {color: #3567cc;}
.weblinks A:hover {text-decoration: none; color: black;}

I dont have a link to the page Im afraid

karinne · 03-06-2007, 08:11 PM

No ... it needs to be

Code:

a.weblinks {font-family:Arial, Helvetica, sans-serif; font-size:small;}
a.weblinks:link {color: #3567cc;}
a.weblinks:visited {color: #3567cc;}
a.weblinks:hover {text-decoration: none; color: black;}

J1mmy · 03-06-2007, 08:12 PM

So, this isnt right either, posted by Arbitrator? This is where I got it from in the first place.

Code:

.footerlinks A {font-family:Arial, Helvetica, sans-serif; font-size:small;}
.footerlinks A:link {color: #666;}
.footerlinks A:visited {color: #666;}
.footerlinks A:hover {text-decoration: none; color: black;}