HIGHLIGHTING LINKS
 

BACKGROUND

 

This tutorial assumes some familiarity with CSS and DHTML. 

CASCADING STYLE SHEET
 CSS (Cascading Style Sheet) method is the most practical way to highlight links.  The highlight can be added by adding the following style: background-color: color.

Note that CSS only works on browsers that supports CSS.  Most current generation of  browsers do support CSS.   The examples on this tutorial are tested with Internet Explorer 6, Netscape 6.2, Netscape 7, and Firefox 1.02 on Windows XP.
      
 

HIGHLIGHTING LINKS AT ALL TIME

 
 


1) Using inline style-sheet:
 This method is usually used if you want to highlight some (but not all) of your links.  It's also useful if you want to use different highlight colors between links.  

Add STYLE="background-color: color" on the links that you want to highlight.   (You should include the quote signs like the example above.)  For links that you do not want to highlight, use the regular <A HREF> tag.  For example:

<A STYLE="background-color: rgb(255,255,0)" HREF="link.html">
This link is highlighted</A>
  
<A HREF="link.html">
This is a normal link</A>

That code produces something like these:  

This link is highlighted with yellow - rgb (255, 255, 0)
This is a normal link

The rgb(255,255,0) is the highlight color (that value produces the color yellow).  You can also specify the color using a hexadecimal number, using #RRGGBB format (example: background-color: #FFFF00) .  You can use any color you want.  For more info on RGB color click here.   Below is another example with a different highlight color:

This link is highlighted with green - rgb(0, 255, 0)

Here's a more compact example: Highlighting Links Using Internal Style Sheet

2) Using internal style-sheet:
This method is useful if you want all of the links on the current page to be highlighted, so you don't have to add a style-sheet to each link manually.  Put the following style definition between the <HEAD> and </HEAD> tags on the html file:

<STYLE>
<!--
a {background-color: rgb(0,255,0)}
//-->
</STYLE>

Example:

<A HREF="link.html">
This link is highlighted</A>

This link is highlighted

See an example page.
Note that the brackets after the a and at the end are curly brackets { }, while the brackets on the rgb() are regular brackets.  

If you want some links to use a different highlight color, you can create different classes (see Advanced Section below).   You might be wondering what to do if you do not want some links to be highlighted.   These will also be discussed in the Advanced Section.

3) Using external style sheet:
An external style-sheet is a file that contains style definitions.  By saving the style definitions into a file,  the file can be reused on multiple html files.   This avoids having to enter the style-sheet definition on every single page.  So, this method will save you time if you want to apply the style across different html documents.   You can then include the file on every page that you want the links to be highlighted.  

First, create a text file which contains the following: 

<!--
a {background-color: rgb(255,255,0)}
//-->

Save the file and name it something.css  Use any valid name that you want, but you must use .css extension.

Enter the following between the <HEAD> and </HEAD> tags on every document:

<HEAD>
<LINK REL=stylesheet TYPE="text/css" HREF="something.css">
</HEAD>

Note that this assumes that something.css is the name of the style-sheet file.  

<A HREF="link.html">This is a normal link</A>

That link will automatically be highlighted.  (Note that the .css file does not necessarily have to be on the same directory as the html file; just make sure to put the correct path if it's not on the same directory.)  

  
 

HIGHLIGHTING LINKS UPON MOUSE OVERS

  
 


In this section, we will explore what is required to highlight a link only when the mouse is over the link.  One approach is to use the hover pseudo class; another approach is to use an onMouseOver event handler.  

What is the hover pseudo class?  The hover pseudo class, along with active, and focus, are predefined classes for dynamic elements.   A link element (ie: an <A HREF> element) is a dynamic element, so we can use this pseudo class to specify what style to use when the mouse is hovering on the link.  This is presented in Example 1) and 2) below.

There is a small issue with the hover class: it cannot be specified as an inline style-sheet.  This issue usually comes up when you want to highlight some (but not all) links.  There are several workaround for this.  One is to use the onMouseMove event handler as shown in Example 3).  Another one is to create separate classes for different kind of links.  This is discussed in the Advanced Section below.

1) Using internal style-sheet:
Put the following style definition between the <HEAD> and </HEAD> tags on the html file:

<STYLE>
<!--
a:hover 
{
  background-color: rgb(255, 255, 0);
}
//-->
</STYLE>

Example:
  
<A HREF="link.html">
This link is highlighted</A>

Move the mouse over this link to see it highlighted.

See an example page.

2) Using external style sheet:
This method will be the most practical if you want to use the style across different documents.  You can avoid having to enter the style definition on every page by saving the style-sheet into a file.  You can then include the file on every page that you want the underline to be removed.  

First, create a text file which contains the following: 

<!--
a:hover 
{
  background-color: rgb(255, 255, 166);
}
//-->

The remaining instruction is the same as item 3 in the previous subject.

3) Using event handler:
 This method is recommended if you want to highlight some (but not all) of your links.  It is also useful if you want to use different highlight color between links.  (Another way to do it is to create separate classes - see Advanced Section below.)

<A 
  onMouseOver="oldColor=this.style.backgroundColor;
      this.style.backgroundColor='#FFFF00';" 
  onMouseOut="this.style.backgroundColor=oldColor;"
  HREF="link.html">
This is an unusual link, it has no underline</A>

The onMouseOver event handler does two things: 

1) It saves the original background color of the link, so it can be restored later; 
2) It highlights the link by changing the background color.

The onMouseOut event handler restores the original background color.  This is important, otherwise the link will stay highlighted.  The result of the above example is like below:  

This link will be highlighted when the mouse is over it.

Here's another one with a different highlight color.

This link will be highlighted when the mouse is over it.

The code can be streamlined using functions.  Click here for an example.
  

  
 

ADVANCED SECTION

 
 


1) Using internal style-sheet with classes:
There might be cases where we want to use style-sheets; yet want some links to look different.  For example, some link should have blue background, and some yellow.  For this situations, you can always use inline style-sheet.  The drawback of this is that if you want to change the color of the highlight for one type of link, for example, you'll need to modify all the inline style-sheets.  

To avoid that you can create different classes for different type of links.  For example, below I have created 3 classes named highlight1, highlight2, and fancyHighlight.  I can also create a different class to use different color for different highlight color.

<STYLE>
<!--
a.highlight1 {background-color: rgb(255,255,0)}
a.highlight2 {background-color: rgb(0,255,0)}
a.fancyHighlight {background-color: rgb(0,255,255)}
//-->
</STYLE>

Here are some examples using the classes: 

<a class="highlight1" HREF="index.html">This will be highlighted</a>
<a HREF="index.html">No class assigned.  This will not be highlighted</a>
<a class="highlight2" HREF="index.html">This will be highlighted, too</a>
<a class="highlight2" HREF="index.html">This will be highlighted, too</a>
<a class="highlight2" HREF="index.html">This will be highlighted, too</a>
<a class="fancyHighlight" HREF="index.html">This will be highlighted, too</a>

The first link uses the highlight1 class, it will be highlighted.  
The second link is a regular link, it will not be highlighted.  
The third link uses the highlight2 class, it will be highlighted with a different color.  

Link1: This will be highlighted
Link2: This will not be highlighted
Link3: This will be highlighted, too
Link4: This will be highlighted, too
Link5: This will be highlighted, too
See the example page.

By using this method, if, for example, I want to change the color of highlight2 class from green to red, I can just change the style sheet on one place, like this:

<STYLE>
<!--
a.highlight1 {background-color: rgb(255,255,0)}
a.highlight2 {background-color: rgb(255,0,0)}
//-->
</STYLE>

2) Highlighting and altering text color upon mouse over:
In addition to highlighting, a link text color can also be changed by changing the style-sheet.  This can be accomplished by setting the color property of the style sheet.   For example, the style-sheet below will cause a link to be highlighted with black - rgb(0,0,0); and the text color to be changed to yellow rgb(255,255,0) when the mouse is over the link.

<STYLE>
<!--
a.hover
{
  background-color: rgb(0,0,0);
  color: rgb(255,255,0);
}
//-->
</STYLE>

Here is an example:
Move the mouse over this link.
See the example page.

If I want the link to be initially highlighted (instead of only when the mouse is over it), I can also define the style like this:
<STYLE>
<!--
a
{
  background-color: rgb(255,255,0);
}

a.hover
{
  background-color: rgb(0,0,0);
  color: rgb(255,255,0);
}
//-->
</STYLE>

Here is an example:
Move the mouse over this link.  The highlight and text color will be changed.

  

 
 

 

<<INDEX>>


Terms of Use
(C) F. Permadi