How to Create Mouseover Link Color Changes

You can change the color of your links on the web when someone rolls over the link or clicks on it. A quick way to create a mouseover link color change is with Cascading Style Sheets. Cascading Style Sheets help you to create consistent pages throughout your website.

Difficulty: Moderate

Instructions

Things You'll Need:

• Your favorite text editor, such as Notepad or Wordpad

Creating a Mouseover Link Color in a Separate CSS File

1. Open your favorite web editor and create a Cascading Style Sheet file for your code.

2. Add the following code to your CSS file:
   a {
   color: #0000FF;
   text-decoration: underline;
   }
   a:hover {
   color: #000000;
   text-decoration: none;
   }
   
   The above code changes a blue link with an underline to a black link without underline during a mouseover. Change the mouseover link colors (0000FF and 000000) to the colors you'd like to use.

3. Save your file as "style.css" or the filename you'd like to use. Be sure to leave the "css" file extension in your file name. Don't let your text editor add a ".txt" file extension.

4. Open the HTML document in which the code will be used and add the following code between your head tag:
   <link rel="stylesheet" type="text/css" href="style.css" />

5. Save your HTML file and preview your work in a browser. Every page that includes the code: "<link rel="stylesheet" type="text/css" href="style.css" />" within the head tag will be affected.

Creating a Mouseover Link Color Inside the HTML File

6. Open your favorite web editor and the HTML document you're working on.

7. Add the following code between your head tag:
   <style type="text/css">
   a {
   color: #0000FF;
   text-decoration: underline;
   }
   a:hover {
   color: #000000;
   text-decoration: none;
   }
   </style>
   </head>
   
   The above code changes a blue link with an underline to a black link without underline during a mouseover. Change the mouseover link colors (0000FF and 000000) to the colors you'd like to use.

8. Save your file and preview it in a web browser. Every link within your HTML document will be affected.

Create Mouseover Link Color Change for Specific Links

9. Follow the instructions for creating a mouseover link in a separate file or within the HTML document.

10. Replace the code in Step 2 with the following for your chosen option:
    a.blue {
    color: #0000FF;
    text-decoration: none;
    }
    a.blue:hover {
    color: #000000;
    text-decoration: none;
    }
    </style>
    
    You may replace "a.blue" and "a.blue:hover" with the names that apply to your mouseover link colors.

11. Call the code into action by adding the following code within the body tag for the links you want changed:
    <a href="http://somelinkhere.com" class="blue">some text link here</a>
    
    Again, you may replace "blue" with the class name you created for your link the previous step.

12. Save your HTML file and preview it in a web browser. Your mouseover links are now ready for the web.

References

• CSS Online Tutorial