Collected by
Elizabeth Janson
Home Page

Using Link Tags

  Do not change the link colors unless you have to. With most background colors, the defaults should still be fine. If you do need to change the link colors, use a color that is bright, and high-contrast to the background color, for links to pages which have not yet been visited. Use a duller version of that same color for links that have already been followed.

Customize how links appear

With style sheets you have a lot more control over how links appear on your pages - no longer the boring underlined colored text that is the default in most browsers. As well as allowing you to make your pages look a little individual, this also means you can make different types of links look different. The most simple example of this is to have links that go to other sites look different from links which go to other parts of the same site.

Links can do many things. They can point to email addresses, other parts of the same page, other parts of the same site, or different sites altogether. And we don't really know which of these a little bit of underlined blue text is until we move the mouse over it and inspect the url, or possibly until we click the link.

Combining Class and the Link Selector

Here is the tricky part. We need to combine the link selectors with class selectors. To do this, we use the following form

A.class-name:link-state
for example
The selector to select email links in the active state is A.email:active see the dot before the class name, then the colon.

A.onsite:link {background-color: #ccffcc}
A.onsite:visited {background-color: #99ffcc}
A.onsite:active {background-color: #66ffcc}
A.onsite:hover {background-color: #33ffcc ;text-decoration: none; }

A.offsite:link {background-color: #ffccff}
A.offsite:visited {background-color: #ff99ff}
A.offsite:active {background-color: #ff66ff}
A.offsite:hover {background-color: #ff33ff ;text-decoration: none; }

A.email:link {background-color: #00ffff}
A.email:visited {background-color: #66ffff}
A.email:active {background-color: #99ffff}
A.email:hover {background-color: #ccffff ;text-decoration: none; }

Sample links are defined with class="onsite" or class="email"

eg: <a class="onsite" href="...">...</a>
this is the Onsite is the Offsite is the Link

Another way, using colours as names, and placing CLASS="orange" after the address.

non-existent orange file
non-existent white file
the last non-existent file (using my page definitions)

Another writer commented :-
Some browsers get very confused if you try to set different link styles within one document. You can work your way around this buy using a STYLE attribute in every A tag.
<A HREF="yyy.html" STYLE="color:green; font-family:serif; font-weight:bold;">non-existent green file</A>
<A HREF="zzz.html" STYLE="color:red; font-family:monospace; text-decoration:none;">non-existent red file</A>

non-existent green file non-existent red file 

<a href="http://www.w3.org/"
          style="{color: red}
          :link {background: yellow}
          :visited {background: blue}
          :hover {outline: thin black solid}
          :active {background: green}">imagined</A> file
imagined file

Second example: 

<a href="http://www.w3.org/"
   style="{color: blue; background: yellow}  /* a+=0 b+=0 c+=0 */
          :visited {color: green}           /* a+=0 b+=1 c+=0 */
          :hover {background: red}       /* a+=0 b+=1 c+=0 */
         ">
  Example of a hyperlink with special one-off
  visited and hover effects.
</a>
Example of a hyperlink with special one-off visited and hover effects.
Notice cascade effect again. Does not work very well.

How many Link attributes can we define?

Email
CSS begins here
Back to Tags or on to links underlined.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.