Things You'll Need:
- Your favorite text editor, such as Notepad or Wordpad
-
Step 1
Open your favorite web editor and create a Cascading Style Sheet file for your code.
-
Step 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. -
Step 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.
-
Step 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" /> -
Step 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.
-
Step 1
Open your favorite web editor and the HTML document you're working on.
-
Step 2
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. -
Step 3
Save your file and preview it in a web browser. Every link within your HTML document will be affected.
-
Step 1
Follow the instructions for creating a mouseover link in a separate file or within the HTML document.
-
Step 2
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. -
Step 3
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. -
Step 4
Save your HTML file and preview it in a web browser. Your mouseover links are now ready for the web.












