Changing Link Color in HTML

Discussion in 'HTML' started by victoria.wong.jhu@gmail.com, Sep 11, 2007.

  1. Guest

    I am designing a web page. I would like to differentiate two types of
    links: those to internal documents, and those hosted at an external
    location. I have decided to do this by specifying different colors for
    each type of link. Therefore, the link color must change halfway down.
    Unfortunately, my web searching has only uncovered ways to change link
    color in HTML by making it part of the < body > tag.
    Is there a way to do this in straight HTML, or do I need to dig up
    Dreamweaver or (gasp!) Frontpage?
     
    , Sep 11, 2007
    #1
    1. Advertising

  2. Scripsit :

    > I am designing a web page. I would like to differentiate two types of
    > links: those to internal documents, and those hosted at an external
    > location.


    If you think it serves a useful purpose (rather than just the page owner's
    own idea of classifying links that way), put something like "(external)" or
    "(ext.)" or maybe <img alt="(external)" title="the preceding link refers to
    a resource external to this site" class="ext" src="ext.gif" width="..."
    height="..."> after each external link and put
    @media print { .ext { display: none; } }
    into your style sheet.

    But think first! Will this help users, or just confuse them, or annoy them,
    or be simply irrelevant?

    > I have decided to do this by specifying different colors for
    > each type of link.


    Wrong idea. A natural one, but wrong. You won't be able to figure out a
    system of colors that works. Remember that you would need at least 3 + 3
    different colors, to maintain the vital distinction between different states
    of links. More info:
    http://www.cs.tut.fi/~jkorpela/www/links.html

    But if you still "must" do it, you need to add class attributes to the
    external (or internal) links and use CSS.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 11, 2007
    #2
    1. Advertising

  3. On Sep 11, 1:55 pm, "Jukka K. Korpela" <> wrote:
    > Scripsit :
    >
    > > I am designing a web page. I would like to differentiate two types of
    > > links: those to internal documents, and those hosted at an external
    > > location.

    >
    > If you think it serves a useful purpose (rather than just the page owner's
    > own idea of classifying links that way), put something like "(external)" or
    > "(ext.)" or maybe <img alt="(external)" title="the preceding link refers to
    > a resource external to this site" class="ext" src="ext.gif" width="..."
    > height="..."> after each external link and put
    > @media print { .ext { display: none; } }
    > into your style sheet.
    >
    > But think first! Will this help users, or just confuse them, or annoy them,
    > or be simply irrelevant?
    >
    > > I have decided to do this by specifying different colors for
    > > each type of link.

    >
    > Wrong idea. A natural one, but wrong. You won't be able to figure out a
    > system of colors that works. Remember that you would need at least 3 + 3
    > different colors, to maintain the vital distinction between different states
    > of links. More info:http://www.cs.tut.fi/~jkorpela/www/links.html
    >
    > But if you still "must" do it, you need to add class attributes to the
    > external (or internal) links and use CSS.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    use two diff classes - like:

    <a href="internal link"><span class="a_internal">internal</span></a>
    <a href="external link"><span class="a_external">external</span></a>

    ..a_internal{font.....}
    ..a_external{font.....}
     
    Chris Jackson, Sep 11, 2007
    #3
  4. Chris Jackson wrote:

    >
    > use two diff classes - like:



    Okay...
    >
    > <a href="internal link"><span class="a_internal">internal</span></a>
    > <a href="external link"><span class="a_external">external</span></a>
    >
    > .a_internal{font.....}
    > .a_external{font.....}
    >


    But what's with the spans?

    This will work without added markup.

    a.internal { /whatever your want to style internal links/ }
    a.external { /whatever your want to style external links/ }

    <a href="local.html" class="internal">internal link</a>
    <a href="http://www.example.com" class="external">external link</a>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 11, 2007
    #4
  5. Art Guest

    On 9/11/07 2:55 PM, Jukka K. Korpela wrote:

    > Scripsit :
    >
    >> I am designing a web page. I would like to differentiate two types of
    >> links: those to internal documents, and those hosted at an external
    >> location.

    >
    > If you think it serves a useful purpose (rather than just the page owner's
    > own idea of classifying links that way), put something like "(external)" or
    > "(ext.)" or maybe <img alt="(external)" title="the preceding link refers to
    > a resource external to this site" class="ext" src="ext.gif" width="..."
    > height="..."> after each external link and put
    > @media print { .ext { display: none; } }
    > into your style sheet.
    >
    > But think first! Will this help users, or just confuse them, or annoy them,
    > or be simply irrelevant?
    >
    >> I have decided to do this by specifying different colors for
    >> each type of link.

    >
    > Wrong idea. A natural one, but wrong. You won't be able to figure out a
    > system of colors that works. Remember that you would need at least 3 + 3
    > different colors, to maintain the vital distinction between different states
    > of links. More info:
    > http://www.cs.tut.fi/~jkorpela/www/links.html
    >
    > But if you still "must" do it, you need to add class attributes to the
    > external (or internal) links and use CSS.
    >

    There are some instances where an alternate type of hyperlink
    identification by color and styling is desirable.

    One such example would be the case of hyperlinks contained in a top
    level navigation bar, masthead, or common trailer region. In these
    instances, the hyperlinks would show up without underlining and in a
    consistent color regardless of visited state. This styling would likely
    be different that what is deployed in the main content areas.

    Pages that utilize <img>'s for navigation hyperlinks typically follow
    this scheme. The same can be accomplished with text hyperlinks in <a>
    anchors as well.

    A css div style can be defined for such hyperlinks (div.masthead in the
    example). Then a <div class=masthead>...</div> container surrounds the
    applicable block for the area in the HTML. This saves having to specify
    them via style/class/span overrides for each instance of an <a> anchor.

    For example (masthead background defined in a dark blue hue):

    div.masthead a:link {
    background: inherit; \* for CSS checker compliance *\
    color:white; \* link color *\
    text-decoration:none; \* suppresses underlining *\
    }

    div.masthead a:visited {
    background: inherit;
    color:white; \* keeps color same as link color *\
    text-decoration:none;
    }

    div.masthead a:hover {
    background: inherit;
    color: #CC0000; \* highlight color when rodent is passed over a
    link *\
    text-decoration:none;
    }

    Art
     
    Art, Sep 11, 2007
    #5
  6. Scripsit Chris Jackson:

    > On Sep 11, 1:55 pm, "Jukka K. Korpela" <> wrote:

    - -
    >> --
    >> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    Next time you should considering reading the message comprehensively,
    instead of quoting it comprehensively, before you start commenting on it.
    This may prevent some embarrassments like suggesting an inferior solution
    after quoting a message that suggests some feasible approaches.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Quote this to join the Clueless Club!
     
    Jukka K. Korpela, Sep 11, 2007
    #6
  7. Scripsit Art:

    [ after the usual bogosity alert, fullquoting ]

    > There are some instances where an alternate type of hyperlink
    > identification by color and styling is desirable.


    To whom?

    > One such example would be the case of hyperlinks contained in a top
    > level navigation bar, masthead, or common trailer region. In these
    > instances, the hyperlinks would show up without underlining and in a
    > consistent color regardless of visited state.


    That's bad usability. When visiting a site, it can be quite relevant to see
    at a glance which sections you have already visited.

    Besides, putting _external_ links into a navigation bar would be odd, and
    the original question was aboud separating external links from internal
    links,

    > background: inherit; \* for CSS checker compliance *\


    Thanks for the bogosity alert. You want to use a CSS checker but silence its
    warnings without understanding them (and probably without realizing that the
    dominant browser does not support the keyword inherit).

    > color: #CC0000; \* highlight color when rodent is passed over
    > a link *\


    How amusing. Comments are a great place for humor - what else would they be
    for?

    But there was nothing related to the issue of separating external and
    internal links by color or otherwise in your proposal.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 11, 2007
    #7
  8. Ben C Guest

    On 2007-09-11, Jukka K. Korpela <> wrote:
    [...]
    >> background: inherit; \* for CSS checker compliance *\

    [...]
    >> color: #CC0000; \* highlight color when rodent is passed over
    >> a link *\

    >
    > How amusing. Comments are a great place for humor - what else would
    > they be for?


    Those aren't comments.
     
    Ben C, Sep 11, 2007
    #8
  9. Art wrote:

    > background: inherit; \* for CSS checker compliance *\


    Does that validate? In all my CSS files, the comments look like this:

    /* for CSS checker compliance */

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Sep 11, 2007
    #9
  10. Scripsit Ben C:

    > On 2007-09-11, Jukka K. Korpela <> wrote:
    > [...]
    >>> background: inherit; \* for CSS checker compliance *\

    > [...]
    >>> color: #CC0000; \* highlight color when rodent is passed
    >>> over a link *\

    >>
    >> How amusing. Comments are a great place for humor - what else would
    >> they be for?

    >
    > Those aren't comments.


    That's part of the humor I guess. The reverse solidus (backslash) instead of
    the solidus (slash) is a good tool for perverse humor, isn't it? It also
    makes it rather clear that the proposed "solution" was not actually tried
    before posting it.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 11, 2007
    #10
  11. Art Guest

    On 9/11/07 5:33 PM, Jukka K. Korpela wrote:

    > Scripsit Art:

    [...]
    >> There are some instances where an alternate type of hyperlink
    >> identification by color and styling is desirable.

    >
    > To whom?

    Professional web site designers and their clients who pay the bills.

    [...]
    > When visiting a site, it can be quite relevant to see
    > at a glance which sections you have already visited.

    One could make that case for links within body text that refer to static
    content, but not for masthead navigation links that point to content
    that is dynamic. Colorizing the "visited" state in these cases serves no
    useful purpose and could even be interpreted as counter-intuitive to the
    viewer.

    Major sites such as cnn.com, nytimes.com, netflix.com, yahoo.com,
    si.com, google.com and many others all deploy a consistent graphical
    design and color scheme within their navigation mastheads with no
    "visited" color indication.

    >
    > Besides, putting _external_ links into a navigation bar would be odd, and
    > the original question was aboud separating external links from internal
    > links,

    cnn.com distinguishes external vs. internal links via color in their
    masthead links that point to sites outside their cnn.com domain (eg.
    time.com).

    >
    >> background: inherit; \* for CSS checker compliance *\

    [...]
    > You want to use a CSS checker but silence its warnings

    [...]
    .... and incur the wrath of the alt.html police for posting non-compliant
    code :) ?

    BTW, the comments were pasted into the code snippets for clarity. Sorry
    that the markers are backwards (should be /*...*/ pairs) - a result of
    late night keyboard dyslexia :).

    Art
     
    Art, Sep 12, 2007
    #11
  12. Scripsit Art:

    >>> There are some instances where an alternate type of hyperlink
    >>> identification by color and styling is desirable.

    >>
    >> To whom?

    > Professional web site designers and their clients who pay the bills.


    Well, my question was really rhetoric. I was implicitly referring to
    so-called users. I know that pruhfessional dee-ziners compete in inventing
    and implementing crazy ideas.

    >> When visiting a site, it can be quite relevant to see
    >> at a glance which sections you have already visited.

    > One could make that case for links within body text that refer to
    > static content, but not for masthead navigation links that point to
    > content that is dynamic.


    You have missed the point. Being in "visited" state simply means that the
    linked resource has been visited relatively recently, not that its content
    is all known to the user. Whether the resource is "static" or "dynamic", the
    user cannot know that its content has not been changed since the last visit.
    But he can know, for example, when visiting a site for the first time, or
    for the first time in this quartal, whether he has _now_ checked the main
    pages of all sections - unless a dee-ziner decided that his fixed ideas on
    cool appearance is more important than usability.

    > Major sites such as [...]


    contain lots of examples of poor usability, fragile coding, etc. etc. Your
    point? Big companies have money to waste. The good news is that you can
    create great sites by just doing nothing (in many areas where so many
    organizations and authors waste time and money to create poor usability).

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Sep 13, 2007
    #12
    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:
    866
    Kevin Spencer
    May 17, 2005
  2. Matt Adams
    Replies:
    0
    Views:
    893
    Matt Adams
    Aug 26, 2003
  3. musicista

    link changing color

    musicista, Feb 22, 2004, in forum: HTML
    Replies:
    4
    Views:
    437
    Jukka K. Korpela
    Feb 22, 2004
  4. Chris Davoli

    Changing the color of a border in an HTML table

    Chris Davoli, Jul 20, 2007, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    174
    marss
    Jul 23, 2007
  5. Kamaljeet Saini
    Replies:
    0
    Views:
    431
    Kamaljeet Saini
    Feb 13, 2009
Loading...

Share This Page