different link colors

Discussion in 'HTML' started by blushark, Feb 25, 2009.

  1. blushark

    blushark Guest

    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!
    blushark, Feb 25, 2009
    #1
    1. Advertising

  2. blushark

    rf Guest

    blushark wrote:
    > 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>
    rf, Feb 25, 2009
    #2
    1. Advertising

  3. blushark wrote:
    > 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...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 25, 2009
    #3
  4. blushark

    richard Guest

    On Wed, 25 Feb 2009 13:41:43 +0100, blushark <>
    wrote:

    >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;}
    richard, Feb 25, 2009
    #4
  5. richard wrote:
    > On Wed, 25 Feb 2009 13:41:43 +0100, blushark <>
    > wrote:
    >
    >> 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;}


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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 25, 2009
    #5
  6. Jonathan N. Little wrote:

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


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 25, 2009
    #6
  7. blushark

    SAZ Guest

    In article <ni1px5cwk6gv.s0gopvc5600x$>,
    says...
    > 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.
    SAZ, Feb 25, 2009
    #7
  8. Jukka K. Korpela wrote:
    > Jonathan N. Little wrote:
    >
    >> blushark wrote:
    >>> 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.

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

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



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 25, 2009
    #8
  9. SAZ wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 25, 2009
    #9
  10. Jukka K. Korpela wrote:
    > Jonathan N. Little wrote:
    >
    >> blushark wrote:
    >>> 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.

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


    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.

    > 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.
    >
    Harlan Messinger, Feb 25, 2009
    #10
  11. SAZ wrote:
    > In article <ni1px5cwk6gv.s0gopvc5600x$>,
    > says...
    >> 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>


    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; }
    Harlan Messinger, Feb 25, 2009
    #11
  12. blushark

    SAZ Guest

    In article <Vygpl.6620$>,
    says...
    > SAZ wrote:
    >
    > > 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.


    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....)?
    SAZ, Feb 25, 2009
    #12
  13. SAZ wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 25, 2009
    #13
  14. blushark

    dorayme Guest

    In article <>,
    Harlan Messinger <> wrote:

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

    --
    dorayme
    dorayme, Feb 25, 2009
    #14
  15. dorayme wrote:
    > In article <>,
    > SAZ <> wrote:
    >
    >> I should
    >> have typed this:
    >>
    >> .blue a:link { color: blue; }
    >>
    >> Which DEFINITELY works after you enter visited, hover, etc.

    >
    > 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, Feb 25, 2009
    #15
  16. dorayme wrote:
    > In article <>,
    > Harlan Messinger <> wrote:
    >
    >> 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.


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

    > One does not have to assume your *one* particular purpose is "the
    > purpose" in order to recommend it as a good one.
    >
    Harlan Messinger, Feb 25, 2009
    #16
  17. blushark

    dorayme Guest

    In article <>,
    Harlan Messinger <> wrote:

    > dorayme wrote:

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


    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.

    --
    dorayme
    dorayme, Feb 25, 2009
    #17
  18. dorayme wrote:
    > In article <>,
    > SAZ <> wrote:
    >
    >> I should
    >> have typed this:
    >>
    >> .blue a:link { color: blue; }
    >>
    >> Which DEFINITELY works after you enter visited, hover, etc.

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 26, 2009
    #18
  19. blushark

    dorayme Guest

    In article <>,
    Harlan Messinger <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > Harlan Messinger <> wrote:
    > >
    > >> 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.

    >
    > 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
    because you can be advised who to put on your list <g>)

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


    --
    dorayme
    dorayme, Feb 26, 2009
    #19
  20. blushark

    SAZ Guest

    In article <poipl.6699$>,
    says...
    > SAZ wrote:
    >
    > > 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.
    >
    >



    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.
    SAZ, Feb 26, 2009
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    818
    Kevin Spencer
    May 17, 2005
  2. Brian

    Link colors

    Brian, Jul 21, 2005, in forum: HTML
    Replies:
    14
    Views:
    899
    Noozer
    Jul 22, 2005
  3. Woodmon
    Replies:
    20
    Views:
    16,757
    Toby Inkster
    Oct 22, 2005
  4. AAaron123

    TreeNode colors come from anchor colors

    AAaron123, Aug 7, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    537
    darrel
    Aug 7, 2008
  5. ZelluX
    Replies:
    3
    Views:
    1,882
    Peter Otten
    Dec 1, 2008
Loading...

Share This Page