different link colors

[blushark]

how do i create different link colors on same web page?

i define how <A> tag look with CSS, but how then do i apply different
formatting to few selected links?

i need to do that to maintain contrast between link color and background.

thanks!

 

[rf]

how do i create different link colors on same web page?

i define how <A> tag look with CSS, but how then do i apply different
formatting to few selected links?

<a class=whatever>

 

[Jonathan N. Little]

how do i create different link colors on same web page?

i define how <A> tag look with CSS, but how then do i apply different
formatting to few selected links?

i need to do that to maintain contrast between link color and background.

Okay this is really basic stuff here. You need to learn what are
"selectors" Reference this:

http://www.w3.org/TR/CSS21/selector.html

Then do the beginner tutorials on CSS at htmldog.com and you will easily
learn the answer in a very short period of time...

 

[richard]

how do i create different link colors on same web page?

i define how <A> tag look with CSS, but how then do i apply different
formatting to few selected links?

i need to do that to maintain contrast between link color and background.

thanks!

In your css section:

a:visited {color:Red;}
a:hover {color:Greeen;}
a:active {color:Blue;}

 

[Jonathan N. Little]

In your css section:

a:visited {color:Red;}
a:hover {color:Greeen;}
a:active {color:Blue;}

That will only define the colors for specific states of any link, not
different colors specific links on the page...

 

[Jukka K. Korpela]

Okay this is really basic stuff here.

I beg to differ. It's much more complicated than really basic CSS things.

You need to learn what are
"selectors" Reference this:

http://www.w3.org/TR/CSS21/selector.html

That would be a necessary but not sufficient part of the job.

Then do the beginner tutorials on CSS at htmldog.com and you will
easily learn the answer in a very short period of time...

Quite an optimist you are.

The first question should be "do I really need to use different backgrounds
for different links", and the correct answer is mostly "No, not at all". The
problem asked then vanishes in puff of logic.

If you still need to do that, remember to
a) explicitly set the background too (without relying on "inheritance")
b) set different colors for unvisited, visited, and hovered links at least,
possibly also active and focused links, and even for combinations like
:visited:active.

 

[SAZ]

how do i create different link colors on same web page?

i define how <A> tag look with CSS, but how then do i apply different
formatting to few selected links?

i need to do that to maintain contrast between link color and background.

thanks!

Use different classes:

a:link blue { color: blue; }
a:link green { color: green; }
a:link red { color: red; }

<a class="blue" href="bluepage.html">This is a blue link</a>

and so on.

This is basic CSS, so search Google for a more in-depth answer.

 

[Jonathan N. Little]

I beg to differ. It's much more complicated than really basic CSS things.

Yes if you want to have the fine granularity of control that CSS can
offer for styling the various status of links, and one *should* preserve
indications of visited links, however many sites do not and their
authors are not concerned with it. All they want to do make this link
blue and that link green...

Learning basic selectors beyond *type* selectors such as *class*
selectors is not an overly complicated concept. Yes, CSS is much more
complicated than HTML, but the basics of *class* selectors is pretty
easy to grasp.

That would be a necessary but not sufficient part of the job.


Quite an optimist you are.

The beginner tutorials are quite simple and easy to understand. If a
newbie wants to do a simple page it will most likely not take too much
to figure it out. Of course there are some folks incapable of of sealing
a zip-lock bag and as such web design may be too taxing. But again I was
talking about basic styling...

The first question should be "do I really need to use different
backgrounds for different links", and the correct answer is mostly "No,
not at all". The problem asked then vanishes in puff of logic.

If you still need to do that, remember to
a) explicitly set the background too (without relying on "inheritance")
b) set different colors for unvisited, visited, and hovered links at
least, possibly also active and focused links, and even for combinations
like :visited:active.

Oh come now! The obvious answer is "maybe". More than a few web sites
have sections within their pages that have different background colors
that may necessitate a change in link color. Two *very common*
scenarios, banners and navbars. A different background is logically used
to emphasize and separate such from the regular content of the page.
It is both a logical and legitimate application.

Like precision too, but I think you're nitpicking just a wee bit.

 

[Jukka K. Korpela]

a:link blue { color: blue; }
a:link green { color: green; }
a:link red { color: red; }

<a class="blue" href="bluepage.html">This is a blue link</a>

and so on.

This is basic CSS, so search Google for a more in-depth answer.

If you say this is basic CSS, we can conclude that by your own judgement,
you don't have a clue of the basics of CSS.

Normal cluelessness aside, you don't even know the distinction between an
element selector and a class selector, and your CSS code doesn't have any
effect.

 

[Harlan Messinger]

I beg to differ. It's much more complicated than really basic CSS things.


That would be a necessary but not sufficient part of the job.


Quite an optimist you are.

The first question should be "do I really need to use different
backgrounds for different links", and the correct answer is mostly "No,
not at all". The problem asked then vanishes in puff of logic.

That shouldn't be the first question, it isn't relevant to his
situation. If he already knew how to set the background for *different
kinds of links*, then he wouldn't need to come here to ask how to set
the foreground colors for them, right? He means that he has links
sitting on areas that already have different background colors.

 

[Harlan Messinger]

Use different classes:

a:link blue { color: blue; }
a:link green { color: green; }
a:link red { color: red; }
>
> <a class="blue" href="bluepage.html">This is a blue link</a>

Calling the classes "blue", "green", and "red" would royally defeat the
purpose of using classes.

If links to, say, a glossary page on your website should be green, then
use class "glossary-link", for example, and

a:link.glossary_link { color: green; }

If the links on a div with id="sidebar" are to be red because the div's
background is blue, then

div#sidebar a:link { color: red; }

 

[SAZ]

If you say this is basic CSS, we can conclude that by your own judgement,
you don't have a clue of the basics of CSS.

I guarantee that I have plenty of experience with CSS. 75% of my work
lately is converting several year-old non-functioning FP and DW crap
coded websites into functioning, CSS based websites.

Normal cluelessness aside, you don't even know the distinction between an
element selector and a class selector, and your CSS code doesn't have any
effect.

I'm sorry I even wasted my time on this. My bonehead mistake would have
been caught the moment I viewed the page.

I was giving a VERY basic example of how to do this. I am well aware
that much of the code was missing, and I typed so quickly that I should
have typed this:

..blue a:link { color: blue; }

Which DEFINITELY works after you enter visited, hover, etc. And you
could make it p.blue, div.blue, etc.

And it goes without saying that other variations exist, depending on
usage and desired results.

Now did I cover all bases and show any degree of subject knowledge (not
that I care what you think....)?

 

[Jukka K. Korpela]

I was giving a VERY basic example of how to do this.

And it contained VERY gross mistakes. Why do you bother calling something
elementary and then giving "a VERY basic example" that surely has no chance
of working?

Which DEFINITELY works

For your VERY odd values for "works". Using all wrong selectors was just the
most striking and most obvious mistake.

 

[dorayme]

Calling the classes "blue", "green", and "red" would royally defeat the
purpose of using classes.

mmm... I get a whiff of petitio principii from this. You go too far.

One does not have to assume your *one* particular purpose is "the
purpose" in order to recommend it as a good one.

 

[Harlan Messinger]

er...?

OP might consider more to do like

a:link.red {color: red;}

and

<ul>
<li><a class="red" href="teddyBearsPicnic.mov">Teddy Bears Picnic</a>
(344 K)</li>
...
</ul>

and other things mentioned by others to be added...

(just btw, attention Harlan, a list with items to be coloured
differently for attractiveness to small children would more than justify
colour class names imo)

Even then, if you decided the red ones should be purple, so that you
wound up with

a:link.red { color: purple; }

does the target audience justify the anomaly? Lacking truly meaningful
names one could assign to classes in this case, I think the context
would be "We need an assortment of five colors, however arbitrary they
may be, to make this a festive page for the kiddies", and, therefore,
choose class names color1, color2, color3, color4, and color5, with the
names indicating exactly the level of abstraction required for this
application.

 

[Harlan Messinger]

mmm... I get a whiff of petitio principii from this. You go too far.

Because you assume petitio < French "péter" = "to fart"?

 

[dorayme]

dorayme wrote: ....

Even then, if you decided the red ones should be purple, so that you
wound up with

a:link.red { color: purple; }

does the target audience justify the anomaly?

No, it does not. I was thinking the justification was rather for the
author's/author supervisor/webmaster-elect's ease. I won't put the bells
and whistles on this because I did in answer to Beauregard on this issue
yesterday in another thread (may have been in another group?).

I also attacked the argument from change you are putting and suggested
it was not the towering strength it seemed. Authors should weigh the
pros and cons and there are both and the action taken either way can be
wise depending on the context. I am not recommending color or position
class names.

Lacking truly meaningful
names one could assign to classes in this case, I think the context
would be "We need an assortment of five colors, however arbitrary they
may be, to make this a festive page for the kiddies", and, therefore,
choose class names color1, color2, color3, color4, and color5, with the
names indicating exactly the level of abstraction required for this
application.

Look, I think you have a very fair point, especially if the list is
long, if a lot of things. But I don't *think* I am making just the
obvious point that one can relax the main principle when it is trivial
or unimportant?

I think, sometimes, where there is a short list or a simple positional
layout, it can be more useful to use positional or other visual
identification words and I would not be surprised if it could be so in
some contexts I am not aware off right now. I am talking contexts where
it is not hard for authors to change the class names when the need
arises to stop alleged red things being green and alleged left things
being right.

People differ in what they find easy or confusing. I know I find it
easier in development to *sometimes* use presentational-type names for
classes, And at least with my own sites, I sometimes find them easier to
read this way later on. It would not surprise me that others would too
and that the advantages of this sometimes weigh more than the
disadvantages.

 

[Jonathan N. Little]

er...?

OP might consider more to do like

a:link.red {color: red;}

I think a function name works better

a:link.critical { color: red; }
a:link.warning { color: red; }
a:link.superSpecial { color: red; }

then if your want superSpecial things to be green then

a:link.superSpecial { color: green; }

won't be in conflict with the class name...

 

[dorayme]

Because you assume petitio

Not really. I was being kind, friendly and conciliatory in saying
"whiff". In fact, you straight out beg the question and here is the
argument in more detail:

A purpose of using classes is to provide a target (for, say, a style).
Now in *this* purpose, there is no mention of advantages or
disadvantages about what names to use. No matter what the name, the
target is technically identified and can be styled.

Think of the main purpose of a laser mark for a marksman. Does it matter
about the colour, many colours would do for the marksman to hit it. But
if you build into this purpose that it is to identify the mark *and
also* please the marksman with an instance of his favourite colour,
then, of course, you can easily complain about a laser targeting device
that "it would royally defeat the purpose etc"!

(Now be careful to understand this analogy Harlan because I would hate
to ask you to put yourself on that list you keep of those that don't
understand analogies.

This latter, by the way, is not quite as paradoxical as *being* a barber
that shaves those and only those who do not shave themselves. Mainly

 

[SAZ]

And it contained VERY gross mistakes. Why do you bother calling something
elementary and then giving "a VERY basic example" that surely has no chance
of working?


For your VERY odd values for "works". Using all wrong selectors was just the
most striking and most obvious mistake.

You really are a pompous ass. I made an honest mistake for which I was
humble enough to admit and correct.

My second post contains a method that certainly DOES work, so get off
your high horse and mingle with the average "joe" that does this for a
living.