Home
HTML and CSS
Tutorials
Hover Links in CSS (Part 2)
Level: Beginner Software:
Now that we know how to create hover links in CSS, lets learn how we can change more than just the color!
1. Here is what our document looks like so far:
|
<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> |
2. As you can see, there are two states to our a tag. The first one is simply a, and the latter is the a:hover. We can specify how we want each to look inside of the { and }. Currently, we are only changing the color style. Lets insert the following code to make it so that our link is not underlined until it is hovered over:
|
<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; text-decoration: none; } a:hover { color: #9A0319; text-decoration: underline; } </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 this and open it in an internet browser. As you can see, it is not underlined until it is scrolled over. We can also do the following:
|
<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; text-decoration: none; font-weight: bold; font-family: arial; font-size: 10px; } a:hover { color: #9A0319; text-decoration: overline underline; } </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. Save this and open it in an internet browser, and you will see that the styles are very customized now! Continue to play around with these effects until you find desired results!
Good Luck!
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com