By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,289 Members | 1,260 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,289 IT Pros & Developers. It's quick & easy.

Override of link colors in CSS class?

P: n/a
Please hlep with a very frustrating problem. I need to be able to have a
reference to my "btcopyrights" CSS class override the link colors first
specified earlier in the CSS.

I inherited a large site with a CSS containing as its first lines:

A:link
{
COLOR: #006633;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: underline
}
A:visited
{ ...continuing with an entry for link, visited, hover, and active.

Later in the CSS, there is a class set up like this:

..btcopyrights
{
FONT-SIZE: 9px;
COLOR: #ffffff;
BACKGROUND-COLOR: #000000
}

I need to find a way to have the "btcopyrights" CSS class override the link
colors first specified earlier in the CSS (basically to make them all
white - in this one link) - without changing the basic structure of the
CSS...something that would require code changes to hundreds of pages.

It would also require a great deal of work to change the actual link line
iteself, as it also appears in many, many pages. Somehow I need that single
line, when it uses the btcopyrights class, to simply pick up all white link
attributes.

The actual A tag link I need to have this change affect is...with normal
HTML tag delimiters < changed to [ and > changed to ]...

[td class="btcopyrights"]
[div align="center">Entire Site Contents 2006 Company Name Went Here.
All rights reserved. [A href="terms.asp" target=""] Terms of Service
[/A][/div]
[/td]
Can anyone help?

Thanks very much.

May 14 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
"Richard" <no****@yahoo.com> wrote:
Please hlep with a very frustrating problem. I need to be able to have a
reference to my "btcopyrights" CSS class override the link colors first
specified earlier in the CSS.

I inherited a large site with a CSS containing as its first lines:

A:link
{
COLOR: #006633;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: underline
}
A:visited
{ ...continuing with an entry for link, visited, hover, and active.

Later in the CSS, there is a class set up like this:

.btcopyrights
{
FONT-SIZE: 9px;
Bad idea. IE users can't resize text sized in pixels without digging
through several menus.
COLOR: #ffffff;
BACKGROUND-COLOR: #000000
}
I need to find a way to have the "btcopyrights" CSS class override the link
colors first specified earlier in the CSS (basically to make them all
..btcopyrights a:link {
color: #fff; background: #000;
}
white - in this one link) - without changing the basic structure of the
CSS...something that would require code changes to hundreds of pages.
Eh? Did you mean HTML when you said CSS?

The actual A tag link I need to have this change affect is...with normal
HTML tag delimiters < changed to [ and > changed to ]...
No need to do that. Usenet is a pain text medium.
[td class="btcopyrights"]
[div align="center">Entire Site Contents 2006 Company Name Went Here.
All rights reserved. [A href="terms.asp" target=""] Terms of Service
[/A][/div]
[/td]


What's the point of the <div align="center">? You can just add
text-align: center; to the CSS for .btcopyrights
And what's with the target=""?

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
May 14 '06 #2

P: n/a
To further the education of mankind, "Richard" <no****@yahoo.com>
vouchsafed:
Please hlep with a very frustrating problem. I need to be able to have
a reference to my "btcopyrights" CSS class override the link colors
first specified earlier in the CSS.

I inherited a large site with a CSS containing as its first lines:

A:link
{
COLOR: #006633;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: underline
}
A:visited
{ ...continuing with an entry for link, visited, hover, and active.

Later in the CSS, there is a class set up like this:

.btcopyrights
{
FONT-SIZE: 9px;
COLOR: #ffffff;
BACKGROUND-COLOR: #000000
}

I need to find a way to have the "btcopyrights" CSS class override the
link colors first specified earlier in the CSS (basically to make them
all white - in this one link) - without changing the basic structure
of the CSS...something that would require code changes to hundreds of
pages.
..btcopyrights,.btcopyrights a:link,.btcopyrights a:visited,.btcopyrights
a:hover,.btcopyrights a:active {
background:black;
color:white;
text-align:center;
}
It would also require a great deal of work to change the actual link
line iteself, as it also appears in many, many pages. Somehow I need
that single line, when it uses the btcopyrights class, to simply pick
up all white link attributes.

The actual A tag link I need to have this change affect is...with
normal HTML tag delimiters < changed to [ and > changed to ]...

[td class="btcopyrights"]
[div align="center">Entire Site Contents 2006 Company Name Went
Here.
All rights reserved. [A href="terms.asp" target=""] Terms of Service
[/A][/div]
[/td]


Using align="..." on a div is bad. The "target" is either useless or
detrimental. Suggest:

<td class="btcopyrights">All rights reserved. <a href="terms.asp">Terms
of Service</a>

--
Neredbojias
Infinity has its limits.
May 14 '06 #3

P: n/a
> .btcopyrights,.btcopyrights a:link,.btcopyrights a:visited,.btcopyrights
a:hover,.btcopyrights a:active {
background:black;
color:white;
text-align:center;
}


I do this also:

#top-link a { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:link { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:visited { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:active { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:hover { text-decoration:none; color:#CCCCCC;
font-weight:normal; }

I find this easier to read (I assume the top line corresponds with the first
element of your example above - is this correct?)

When setting this stuff - should it always be done as a set, that is, all 5: a,
link, visited, active, hover? If one of these is left out (hover, for instance)
is that an error?

And what about leaving background-color out? This results in a level 1 warning
when trying to validate the CSS... but if I am using a textured background image
on the page, how do I specify a background-color??

May 15 '06 #4

P: n/a
To further the education of mankind, "deko" <de**@nospam.com>
vouchsafed:
.btcopyrights,.btcopyrights a:link,.btcopyrights
a:visited,.btcopyrights a:hover,.btcopyrights a:active {
background:black;
color:white;
text-align:center;
}
I do this also:

#top-link a { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:link { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:visited { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:active { text-decoration:none; color:#CCCCCC;
font-weight:normal; }
#top-link a:hover { text-decoration:none; color:#CCCCCC;
font-weight:normal; }

I find this easier to read (I assume the top line corresponds with the
first element of your example above - is this correct?)


Not really. .btcopyrights is the classname for a div which has a link as
part of its content.
When setting this stuff - should it always be done as a set, that is,
all 5: a, link, visited, active, hover? If one of these is left out
(hover, for instance) is that an error?
Not really. If you're not concerned with hover or active or
differentiating visited with non-visited, 'a' is enough. If you just
wish to do the latter, a:link and a:visited will suffice. In the
originally-posted example, however, those 4 link attributes were set on
links in general so it's at least prudent to reset them all on subsequent
named or classed links.
And what about leaving background-color out? This results in a level
1 warning when trying to validate the CSS... but if I am using a
textured background image on the page, how do I specify a
background-color??


Exactly! The (supposed) high-level warning is a bogosity. I could
understand an "advisory" or something, but what choice does one have with
a random background? The validator (still) also flags "line-height:0;"
so it can be more prissy than perfect, just like it had a real but
fallible brain.

--
Neredbojias
Infinity has its limits.
May 15 '06 #5

P: n/a
Shortened for legibility:

a { text-deco:none; color:#00F; }
a:link { text-deco:none; color:#00F; }
a:visited { text-deco:none; color:#00F; }
a:active { text-deco:none; color:#00F; }
a:hover { text-deco:underline; color:#00F; }
I find this easier to read (I assume the top line corresponds with the
first element of your example above - is this correct?)


Not really. .btcopyrights is the classname for a div which has a link as
part of its content.


What, then, is 'a'? - and why do I need it?
When setting this stuff - should it always be done as a set, that is,
all 5: a, link, visited, active, hover? If one of these is left out
(hover, for instance) is that an error?


Not really. If you're not concerned with hover or active or
differentiating visited with non-visited, 'a' is enough. If you just
wish to do the latter, a:link and a:visited will suffice.


I see. All I really care about is that the link never changes color and I get
an underline (only) on hover.

Therefore, the below code should work - yes? (I know 'deco' is pseudo code):

a:link { text-deco:none; color:#00F; }
a:visited { text-deco:none; color:#00F; }
a:hover { text-deco:underline; color:#00F; }

Do I need to include that silly 'a'?
And what about leaving background-color out? This results in a level
1 warning when trying to validate the CSS... but if I am using a
textured background image on the page, how do I specify a
background-color??


Exactly! The (supposed) high-level warning is a bogosity. I could
understand an "advisory" or something, but what choice does one have with
a random background? The validator (still) also flags "line-height:0;"
so it can be more prissy than perfect, just like it had a real but
fallible brain.


Thanks for the clarification on this - I will stop looking for a transparent
color designation :)
May 15 '06 #6

P: n/a
On Mon, 15 May 2006, deko wrote:
I see. All I really care about is that the link never changes color


Fortunately, I've got a user stylesheet which will out-vote you on
that :-}
May 15 '06 #7

P: n/a
In article <tb******************************@comcast.com>, deko
<de**@nospam.com> writes
a:link { text-deco:none; color:#00F; }
a:visited { text-deco:none; color:#00F; }
a:hover { text-deco:underline; color:#00F; }

Do I need to include that silly 'a'?
That "silly" 'a' is what tells the CSS that you are styling a link.
Without it, you would have a hard job setting visited and hover styles.
No, not impossible, but why make life hard on yourself?

What do have against the 'a' anyway?

<snip>Thanks for the clarification on this - I will stop looking for a
transparent color designation :)


Well, there is a value "transparent" that you can use for color...

background-color: transparent;

but that also gives an advisory warning in the validator for the same
reasons that leaving out the declaration does!!

HTH

--
Alan Silver
(anything added below this line is nothing to do with me)
May 15 '06 #8

P: n/a
To further the education of mankind, "deko" <de**@nospam.com>
vouchsafed:
What, then, is 'a'? - and why do I need it?
You don't.
When setting this stuff - should it always be done as a set, that
is, all 5: a, link, visited, active, hover? If one of these is left
out (hover, for instance) is that an error?


Not really. If you're not concerned with hover or active or
differentiating visited with non-visited, 'a' is enough. If you just
wish to do the latter, a:link and a:visited will suffice.


I see. All I really care about is that the link never changes color
and I get an underline (only) on hover.

Therefore, the below code should work - yes? (I know 'deco' is pseudo
code):

a:link { text-deco:none; color:#00F; }
a:visited { text-deco:none; color:#00F; }
a:hover { text-deco:underline; color:#00F; }


Uh huh. What I'd do is:

a:link,a:visited { color:radish;background:celery;text-decoration:none; }
a:hover { text-decoration:underline; }
Do I need to include that silly 'a'?
For the above, I think you can:

a { color:radish;background:celery;text-decoration:none; }
a:hover { text-decoration:underline; }

(Try it and let me know.) (PS: Use real colors.)
Thanks for the clarification on this - I will stop looking for a
transparent color designation :)


I used to do like:

a:hover ( color:blue;background:transparent; }

....but the validator bolluxed that now.

--
Neredbojias
Infinity has its limits.
May 15 '06 #9

P: n/a
On Mon, 15 May 2006 04:11:01 -0700, "deko" <de**@nospam.com> wrote:
I see. All I really care about is that the link never changes color and I get
an underline (only) on hover.


So why do you want to make life difficult for your visitors? (Or did you
not appreciate that that is what you are doing?)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
May 15 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.