CSS - override color in 'A {...' ? 1

[jimoblak]

I have a style sheet set up to display all links in green...

A { FONT-WEIGHT: bold; COLOR: green; TEXT-DECORATION: none }

There are a few instances where I want to vary from this rule. Presently, I am manually forcing the color change in the HTML...

<A href=&quot;[URL unfurl="true"]http://www.google.com&quot;><FONT[/URL] color=#594d3d> Google </FONT></A>

Is there a way in CSS (CSS1 preferred) to create a style to override the existing style for 'A HREF's? Or should I continue to manually change the color within the HTML?

- - -

Alternately, I would be interested in applying the green link color to whatever links reside in a particular layer. Ex...

#menu { top: 75px; left: 0px; width: 150px; height: 100%; }
#content { top: 75px; left: 150px; height: 100%; }

If I cannot create a style to override another, is it possible to create a unique link style for different layers? All links in my content layer would be green; all links in my menu layer would be orange.

- - picklefish - -
Why is everyone in this forum responding to me as picklefish?

 

[jimoblak]

This seems to work but I'm still interested in assigning a link color based on a layer style. Any help is appreciated.

<A href=&quot;[URL unfurl="true"]http://www.google.com&quot;><span[/URL] class=pinktext> Google </span></A>

- - picklefish - -
Why is everyone in this forum responding to me as picklefish?

 

[deecee]

you could go with

.layerstyle {FONT-WEIGHT: bold; COLOR: green; TEXT-DECORATION: none}

<DIV class=&quot;layerstyle&quot;><a href=&quot;link&quot; class=&quot;layerstyle&quot;>my style</a></DIV>

you shoudl then be using pseudo classes

a.contentlayers {one type of settings}
a.menulayer {another type of settings}

<a href=&quot;link in content layer&quot; class=&quot;contentlayers&quot;>i am in the content layers</a>
<a href=&quot;link in menu layer&quot; class=&quot;menulayer&quot;>i am in a menu layer</a>

Listen All I ask is that You close out a Post You Started!!!!

 

[deecee]

what i forgot was that you can just make them a layerstyle too

#menulayer {COLOR: green; TEXT-DECORATION: none; top: 0px; left: 0px; width: 150px; height: 75px;}
#contentlayer {COLOR: red; TEXT-DECORATION: none; top: 75px; left: 100px; width: 80%; height: 100%; }

But i also prefer Hex for colors rather than calling out a color as such #xxxxxx -- just my preference. You shouldn't have to assign the classes to each link -- but then how do you differentiate from links -- i took out font-weight and then i guess just wrap links in <strong></strong>

Listen All I ask is that You close out a Post You Started!!!!

 

[Vragabond]

Regarding your second question, here's what you can do:

<style type=&quot;text/css&quot;>
/* this will apply to the links within #menu layer */
/* defining a special style for different pseudo classes (normal and visited) because visited links usually change color */

 #menu a:link, #menu a:visited {
   font-weight: bold;
   color: orange;
   text-decoration: none;
 }

/* this will apply to the links within #content layer */

 #content a:link, #content a:visited {
   font-weight: normal;
   color: green;
   text-decoration: none;
 }
</style>

Basically, what your code says is, that every link element that is a descendant of any tag that has an id specified (menu or content) will behave in the described way. This way you do not need to apply classes to your links. You can also play around with other pseudo classes hover - on mouse over and :active - on mouse down) to achieve other effects.

Regarding your first question, I am not really sure what would cause a link tag to ignore the general stylings provided in the style sheets.