Changing Link Color in HTML

[victoria.wong.jhu]

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?

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

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.

 

[Chris Jackson]

Scripsit (e-mail address removed):


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?


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.

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

 

[Jonathan N. Little]

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>

 

[Art]

Scripsit (e-mail address removed):


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?


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

 

[Jukka K. Korpela]

Scripsit Chris Jackson:

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]

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.

 

[Ben C]

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.

 

[Beauregard T. Shagnasty]

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

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

/* for CSS checker compliance */

 

[Jukka K. Korpela]

Scripsit Ben C:

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.

 

[Art]

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

 

[Jukka K. Korpela]

Scripsit Art:

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.

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