Change Link Font Colours and Overriding Them For Special Cases

[Hardeep Rakhra]

Heya,

I'm trying to use these css buttons on my site,

http://www.meyerweb.com/eric/css/examples/plat-buttons.html

however as soon as you have a default link colour specified by way of
a:link, it overrides the colour values set for the css buttons in their
class identifiers.

I would have thought that applying a class to a element would have given
the element those attributes and overridden any inherited of default ones.

Any idea how i can resolve this?

Hardeep.

 

[Els]

Heya,

I'm trying to use these css buttons on my site,

http://www.meyerweb.com/eric/css/examples/plat-buttons.html

however as soon as you have a default link colour specified by way of
a:link, it overrides the colour values set for the css buttons in their
class identifiers.

to have the colours you want, you should set the style for
the a:link (and a:visited and a:hover of course if you want
those colors changed too).
So let's say the links are in a div like this:
<div class="redlinks">
<a href="home.html">

You should set the style like this:
div.redlinks a:link {color:red;}

I would have thought that applying a class to a element would have given
the element those attributes and overridden any inherited of default ones.

Thought right, but the a:link is not the element you gave
the style to.

Or, also possible, you did put the a:link lower in the
stylesheet than the div.redlinks a:link..
The last style is the one that applies.

When you are not sure what css styles mean and/or 'do', have
a look at this page:
http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
It translates css code into understandable english (or
spanish, german, bulgarian)
(and does a much better job than Babelfish :-D )

 

[Toby A Inkster]

Or, also possible, you did put the a:link lower in the
stylesheet than the div.redlinks a:link..
The last style is the one that applies.

In this case, no. 'div.redlinks a:link' is more specific than 'a:link', so
it doesn't matter which order they come in, 'div.redlinks a:link' will win
out. Order only matters when the specificity of the selectors is equal.

 

[Els]

In this case, no. 'div.redlinks a:link' is more specific than 'a:link', so
it doesn't matter which order they come in, 'div.redlinks a:link' will win
out. Order only matters when the specificity of the selectors is equal.

Thanks for the correction

 

[Hardeep Rakhra]

to have the colours you want, you should set the style for the a:link
(and a:visited and a:hover of course if you want those colors changed too).
So let's say the links are in a div like this:
<div class="redlinks">
<a href="home.html">

You should set the style like this:
div.redlinks a:link {color:red;}

Thank you Els, that helped loads!

Fixed the buttons but using spans and applying the button css to them
and enclosing the lot in a link. Then used what you described above to
remove the text decoration from all the buttons within the enclosing div.

Thanks again.

Hardeep.