Home
HTML and CSS
Tutorials
Hover Links in CSS (part 1)
Level: Beginner Software:
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!
Good Luck!
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com