Change Link Font Colours and Overriding Them For Special Cases

Heya,

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

http://www.meyerweb.com/eric/css/exa...t-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.

Hardeep Rakhra

Hardeep Rakhra wrote:
> Heya,
>
> I'm trying to use these css buttons on my site,
>
> http://www.meyerweb.com/eric/css/exa...t-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-...electoracle.py
It translates css code into understandable english (or
spanish, german, bulgarian)
(and does a much better job than Babelfish )

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Els wrote:

> 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

Toby A Inkster wrote:
> Els wrote:
>
>>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.

Thanks for the correction

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Els wrote:
>
> 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.