This tutorial will show you how to create hover effects with your links using CSS Styles!
1. Create a new document in your favorite text editor, and type the following code into it:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>
|
2. Save this document as hover.html. Open hover.html in your web browser, and you will see that it displays some text, a link, and then some more text. Not very interesting. Now lets use CSS Styles to change the way our link looks:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>
|
3. Save and open in your web browser, and you will see that your links color has changed from its standard color, to a dark green! In the code shown above, we made a few changes to make this possible. First off, we added the <style> tag in the <head> tag. In the <style> tag, we made a style for our "a" tags by typing a {. In this style, we told the color to be #007431, and ended this specification with a ";". We then ended our "a" tag style with a "}". As you continue learning CSS, you will become more familiar with how this all works. Now we need to create a style for when we hover over our links:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
}
a:hover {
color: #9A0319;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>
|
4. As you can see, we added another style called "a:hover". This tells our "a" tags what to do when they are hovered over. In our style, we told the color to turn to #9A0319, a deep red color. Save this and open in a web browser of your choice. As you can see, the link changes colors when scrolled over!
Result
Good Luck!