Use CSS to Highlight Text When a Link is Clicked

This can come in handy when you are linking to different parts of a web page. When the link is clicked, the text on the page that it's linked to will changed color.

Difficulty: Easy

Instructions

Things You'll Need:

• Firefox
• Dreamweaver, Frontpage, Notepad, or other web design or text editing program

1. Add the following code to your style sheet, replacing the color values with the colors you wish to use. The first color is the highlight color and the second is the regular color for the text. In this example, the text color is black and the highlight color is red.
   
   .hilite:target {color: #ff0000}
   .hilite {color: #000000}

2. Add the following code to the text you would like highlighted:
   
   id="text1" class="hilite"
   
   You can put it within a span tag, paragraph tag, etc.

3. Link to this text using the id name from the code above. In this example, the id name is "text1" but you can change it to whatever you want.
   
   Example:
   
   a href="http://www.yoursite.com/index.html#text1"
   
   ...or, if the link is on the same page as the text its linking to, just put:
   
   a href="#text1"

Tips & Warnings

• Right now, this does not work in Internet Explorer, but can be helpful to Firefox users.