COloring links

Discussion in 'HTML' started by Lewis, Jul 5, 2013.

  1. Lewis

    Lewis Guest

    I used to know how to do this.

    I have a link on a page that I need to color differently from the rest
    of the links on the rest of the page, but I can't remember the syntax to
    set the link, visited, and hover, and active colors within a style
    declaration in the <a> tag.

    I cannot edit the css file in this case to add a custom link color
    section, which is what I would normally do.

    I suppose I could do something like

    <span style="color: red;"><a style="color: inherit" href="...">The
    Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
    hover/visted/active colors.

    --
    Mos Eisley spaceport. You will never find a more wretched hive of scum
    and villainy. We must be cautious.
    Lewis, Jul 5, 2013
    #1
    1. Advertising

  2. On 2013-07-04, Lewis wrote:
    > I used to know how to do this.
    >
    > I have a link on a page that I need to color differently from the rest
    > of the links on the rest of the page, but I can't remember the syntax to
    > set the link, visited, and hover, and active colors within a style
    > declaration in the <a> tag.
    >
    > I cannot edit the css file in this case to add a custom link color
    > section, which is what I would normally do.
    >
    > I suppose I could do something like
    >
    ><span style="color: red;"><a style="color: inherit" href="...">The
    > Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
    > hover/visted/active colors.


    Give the anchor a class or an id:

    <a id=imaginary href="">whatever</a>

    Add a <STYLE> element to the <HEAD> or your page:

    <HEAD>
    <STYLE type="text/css">
    a#imaginary:visited { color: british-racing-green; }
    a#imaginary:hover { color: sky-blue-pink; }
    </STYLE>
    </HEAD>

    --
    Chris F.A. Johnson
    <http://torontowebdesign.cfaj.ca/>
    Chris F.A. Johnson, Jul 5, 2013
    #2
    1. Advertising

  3. Lewis

    Lewis Guest

    In message <kr5347$mk8$>
    Chris F.A. Johnson <> wrote:
    > On 2013-07-04, Lewis wrote:
    >> I used to know how to do this.
    >>
    >> I have a link on a page that I need to color differently from the rest
    >> of the links on the rest of the page, but I can't remember the syntax to
    >> set the link, visited, and hover, and active colors within a style
    >> declaration in the <a> tag.
    >>
    >> I cannot edit the css file in this case to add a custom link color
    >> section, which is what I would normally do.
    >>
    >> I suppose I could do something like
    >>
    >><span style="color: red;"><a style="color: inherit" href="...">The
    >> Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
    >> hover/visted/active colors.


    > Give the anchor a class or an id:


    > <a id=imaginary href="">whatever</a>


    > Add a <STYLE> element to the <HEAD> or your page:


    > <HEAD>
    > <STYLE type="text/css">
    > a#imaginary:visited { color: british-racing-green; }
    > a#imaginary:hover { color: sky-blue-pink; }
    > </STYLE>
    > </HEAD>


    I do not have access to the head (I am editing a section of a site, and
    I only have access to that little section of the HTML. I can't change
    the page's CSS because I don't have access to it.


    --
    When the stars threw down their spears And watered heaven with their
    tears, Did He smile his work to see? Did He who made the Lamb make thee?
    Lewis, Jul 5, 2013
    #3
  4. On 2013-07-05, Lewis wrote:
    > In message <kr5347$mk8$>
    > Chris F.A. Johnson <> wrote:
    >> On 2013-07-04, Lewis wrote:
    >>> I used to know how to do this.
    >>>
    >>> I have a link on a page that I need to color differently from the rest
    >>> of the links on the rest of the page, but I can't remember the syntax to
    >>> set the link, visited, and hover, and active colors within a style
    >>> declaration in the <a> tag.
    >>>
    >>> I cannot edit the css file in this case to add a custom link color
    >>> section, which is what I would normally do.
    >>>
    >>> I suppose I could do something like
    >>>
    >>><span style="color: red;"><a style="color: inherit" href="...">The
    >>> Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
    >>> hover/visted/active colors.

    >
    >> Give the anchor a class or an id:

    >
    >> <a id=imaginary href="">whatever</a>

    >
    >> Add a <STYLE> element to the <HEAD> or your page:

    >
    >> <HEAD>
    >> <STYLE type="text/css">
    >> a#imaginary:visited { color: british-racing-green; }
    >> a#imaginary:hover { color: sky-blue-pink; }
    >> </STYLE>
    >> </HEAD>

    >
    > I do not have access to the head (I am editing a section of a site, and
    > I only have access to that little section of the HTML. I can't change
    > the page's CSS because I don't have access to it.


    Use HTML5's scoped style:

    <div class=scoped>
    <style type="text/css" scoped>
    .scoped a#imaginary:visited { color: british-racing-green; }
    .scoped a#imaginary:hover { color: sky-blue-pink; }
    </style>
    <a id=imaginary href="">whatever</a>
    </div>

    The scoped attribure is not implemented on all browsers yet, but
    with the additional class of a containing division, it should work.

    --
    Chris F.A. Johnson
    <http://torontowebdesign.cfaj.ca/>
    Chris F.A. Johnson, Jul 5, 2013
    #4
  5. Lewis

    Lewis Guest

    In message <kr5ct5$rtu$>
    Chris F.A. Johnson <> wrote:
    > On 2013-07-05, Lewis wrote:
    >> In message <kr5347$mk8$>
    >> Chris F.A. Johnson <> wrote:
    >>> On 2013-07-04, Lewis wrote:
    >>>> I used to know how to do this.
    >>>>
    >>>> I have a link on a page that I need to color differently from the rest
    >>>> of the links on the rest of the page, but I can't remember the syntax to
    >>>> set the link, visited, and hover, and active colors within a style
    >>>> declaration in the <a> tag.
    >>>>
    >>>> I cannot edit the css file in this case to add a custom link color
    >>>> section, which is what I would normally do.
    >>>>
    >>>> I suppose I could do something like
    >>>>
    >>>><span style="color: red;"><a style="color: inherit" href="...">The
    >>>> Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
    >>>> hover/visted/active colors.

    >>
    >>> Give the anchor a class or an id:

    >>
    >>> <a id=imaginary href="">whatever</a>

    >>
    >>> Add a <STYLE> element to the <HEAD> or your page:

    >>
    >>> <HEAD>
    >>> <STYLE type="text/css">
    >>> a#imaginary:visited { color: british-racing-green; }
    >>> a#imaginary:hover { color: sky-blue-pink; }
    >>> </STYLE>
    >>> </HEAD>

    >>
    >> I do not have access to the head (I am editing a section of a site, and
    >> I only have access to that little section of the HTML. I can't change
    >> the page's CSS because I don't have access to it.


    > Use HTML5's scoped style:


    > <div class=scoped>
    > <style type="text/css" scoped>
    > .scoped a#imaginary:visited { color: british-racing-green; }
    > .scoped a#imaginary:hover { color: sky-blue-pink; }
    > </style>
    > <a id=imaginary href="">whatever</a>
    > </div>


    Oh, that's clever. I know when last I had to do this it was far more
    complicated than that.

    Thanks!

    --
    Don't congratulate yourself too much, or berate yourself either. You
    choices are half chance; so are everybody else's.
    Lewis, Jul 5, 2013
    #5
  6. 2013-07-05 6:00, Chris F.A. Johnson wrote:

    >> I do not have access to the head (I am editing a section of a site, and
    >> I only have access to that little section of the HTML. I can't change
    >> the page's CSS because I don't have access to it.

    >
    > Use HTML5's scoped style:
    >
    > <div class=scoped>
    > <style type="text/css" scoped>
    > .scoped a#imaginary:visited { color: british-racing-green; }
    > .scoped a#imaginary:hover { color: sky-blue-pink; }
    > </style>
    > <a id=imaginary href="">whatever</a>
    > </div>
    >
    > The scoped attribure is not implemented on all browsers yet, but
    > with the additional class of a containing division, it should work.


    "Not implemented on all browsers" is an understatement. It seems that
    only Firefox, from version 21 or so, supports it:
    http://caniuse.com/#feat=style-scoped
    (And I would not bet much on the reliability of Firefox support,
    especially since the whole scoped thing is experimental and debated.)

    But the point here is that virtually all browsers actually let you put a
    <style> element inside the <body> element, too, and act as if it were
    inside the <head> element, even though this violates HTML
    specifications. The proposed HTML5 rules would *restrict* the effect of
    the style sheet.

    It's really sufficient to use #imaginary in conjuction with the
    pseudo-classes, since an id selector restricts the effect to a single
    element.

    Names like british-racing-green should not be used as dummies, since by
    their form, they could be real color names, but they aren't.

    Regarding the different states and the order of setting them, the LoVe -
    HAte rule applies :)link, :visited, :hover, :active). On the other hand,
    you don't need to set color on :hover and :active, if you prefer to use
    other visual means, like background color or outline, for highlighting them.

    Example (assuming you can wrap the link in a <div> element, which is
    really needed here just to make the markup conform to proposed HTML5 rules):

    <div>
    <!-- the scoped attribute is here to keep HTML5 gods pleased. -->
    <style scoped>
    #imaginary:link { color: blue; }
    #imaginary:visited { color: magenta; }
    </style>
    <a id=imaginary href="...">whatever</a>
    </div>

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jul 5, 2013
    #6
  7. Lewis

    Lewis Guest

    In message <kr5q1k$bdn$>
    Jukka K. Korpela <> wrote:
    > 2013-07-05 6:00, Chris F.A. Johnson wrote:


    >>> I do not have access to the head (I am editing a section of a site, and
    >>> I only have access to that little section of the HTML. I can't change
    >>> the page's CSS because I don't have access to it.

    >>
    >> Use HTML5's scoped style:
    >>
    >> <div class=scoped>
    >> <style type="text/css" scoped>
    >> .scoped a#imaginary:visited { color: british-racing-green; }
    >> .scoped a#imaginary:hover { color: sky-blue-pink; }
    >> </style>
    >> <a id=imaginary href="">whatever</a>
    >> </div>
    >>
    >> The scoped attribure is not implemented on all browsers yet, but
    >> with the additional class of a containing division, it should work.


    > "Not implemented on all browsers" is an understatement. It seems that
    > only Firefox, from version 21 or so, supports it:
    > http://caniuse.com/#feat=style-scoped
    > (And I would not bet much on the reliability of Firefox support,
    > especially since the whole scoped thing is experimental and debated.)


    Seems to work in Safari. Forgot to check Chrome.

    > <div>
    > <!-- the scoped attribute is here to keep HTML5 gods pleased. -->
    > <style scoped>
    > #imaginary:link { color: blue; }
    > #imaginary:visited { color: magenta; }
    > </style>
    > <a id=imaginary href="...">whatever</a>
    > </div>


    Maybe that's why the example works in Safari.

    --
    All Hell hadn't been let loose. It was merely Detritus. But from a few
    feet away you couldn't tell the difference.
    Lewis, Jul 6, 2013
    #7
  8. 2013-07-06 6:36, Lewis wrote:

    >>> The scoped attribure is not implemented on all browsers yet, but
    >>> with the additional class of a containing division, it should work.

    >
    >> "Not implemented on all browsers" is an understatement. It seems that
    >> only Firefox, from version 21 or so, supports it:
    >> http://caniuse.com/#feat=style-scoped
    >> (And I would not bet much on the reliability of Firefox support,
    >> especially since the whole scoped thing is experimental and debated.)

    >
    > Seems to work in Safari.


    That's a misunderstanding. If you visit page
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
    on Safari, then the text
    "This text should be black. If it is red your browser does not support
    the scoped attribute."
    appears in black.

    Safari, like most browsers, does not support the scoped attribute in
    <style> but simply ignores the attribute. As I explained earlier,
    virtually all browsers support the <style> element within the <body>
    element, so when you use <style scoped>, the style sheet works but not
    as per HTML5 (as a scoped style sheet) but as a style sheet that applies
    to the entire document. As discussed, you can still limit its effects to
    content within a specific element, but you need to use that with
    selectors, just as you would do in an external style sheet.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jul 6, 2013
    #8
    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. H. Scott Buckwalter

    Coloring check box list controls Client side

    H. Scott Buckwalter, Sep 25, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    470
    H. Scott Buckwalter
    Sep 25, 2003
  2. M. David Allen

    Win32::OLE, Excel, and coloring

    M. David Allen, Jun 24, 2003, in forum: Perl
    Replies:
    1
    Views:
    5,375
    Jay Tilton
    Jun 25, 2003
  3. asgars
    Replies:
    1
    Views:
    394
  4. Robert Hornsby

    Re: Diff coloring

    Robert Hornsby, Aug 27, 2003, in forum: Java
    Replies:
    1
    Views:
    431
    Alan Moore
    Aug 27, 2003
  5. Ike

    context-coloring

    Ike, Feb 11, 2005, in forum: Java
    Replies:
    1
    Views:
    354
    Thomas Weidenfeller
    Feb 11, 2005
Loading...

Share This Page