Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Changing Link Color in HTML

Reply
Thread Tools

Changing Link Color in HTML

 
 
victoria.wong.jhu@gmail.com
Guest
Posts: n/a
 
      09-11-2007
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?

 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      09-11-2007
Scripsit http://www.velocityreviews.com/forums/(E-Mail 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.

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

 
Reply With Quote
 
 
 
 
Chris Jackson
Guest
Posts: n/a
 
      09-11-2007
On Sep 11, 1:55 pm, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> Scripsit (E-Mail 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.
>
> --
> 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.....}

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-11-2007
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
 
Reply With Quote
 
Art
Guest
Posts: n/a
 
      09-11-2007
On 9/11/07 2:55 PM, Jukka K. Korpela wrote:

> Scripsit (E-Mail 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.
>

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
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      09-11-2007
Scripsit Chris Jackson:

> On Sep 11, 1:55 pm, "Jukka K. Korpela" <(E-Mail Removed)> 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!

 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      09-11-2007
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/

 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      09-11-2007
On 2007-09-11, Jukka K. Korpela <(E-Mail Removed)> 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.
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      09-11-2007
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
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      09-11-2007
Scripsit Ben C:

> On 2007-09-11, Jukka K. Korpela <(E-Mail Removed)> 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/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing font color from current font color to black color Kamaljeet Saini Ruby 0 02-13-2009 04:58 PM
RE: Link Link Link =?Utf-8?B?REw=?= Windows 64bit 0 05-17-2005 12:15 PM
Re: Link Link Link DANGER WILL ROBINSON!!! Kevin Spencer ASP .Net 0 05-17-2005 10:41 AM
link changing color musicista HTML 4 02-22-2004 09:30 PM
Change text color of "visited link" back to unvisited color ??? Matt Adams HTML 0 08-26-2003 10:27 AM



Advertisments