The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
CSS Question [SOLVED]
KrunkMcGrunk
Registered User regular
Registered User regular
I'm doing the tutorials on htmldog.com, which are great, but I can't figure out this page.
Mainly, how do I apply the above properties to HTML? I thought .snowman was a class, but it's apparently not. Can anyone give me an example of what my HTML should look like, if I want to apply those properties?
a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
Mainly, how do I apply the above properties to HTML? I thought .snowman was a class, but it's apparently not. Can anyone give me an example of what my HTML should look like, if I want to apply those properties?
KrunkMcGrunk on
0
This discussion has been closed.
Posts
Any links with class snowman that are not being clicked on or have been visited are blue. Any links with class snowman that have been visited are purple. Any link with class snowman that is currently being clicked is red. And any link with class snowman that is being hovered over has no underline, is blue, and has a background color or yellow.
Some of this CSS doesn't translate exactly to HTML, like the hover attribute. There is no <a href="#" hover="color: blue;">link</a>.
Given the properties above, shouldn't a link's text turn blue, and have a yellow background when I hover my cursor over it? Because, in Firefox, that isn't happening right now.
<html> <head> <style> a.snowman:link { color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; } </style> </head> <body> <a href="http://www.google.com/" class="snowman">Link 1</a><br/> <a href="http://www.nascar.com/" class="snowman">Link 2</a><br/> </body> </html>Three things that I can recommend.
First, try another browser. Try it in IE8 as well as Chrome. Each has their own differences, and stupid things may work for one but not another.
I'd also recommend you get rid of the text-decoration part in the hover. It could be getting rid of everything you're trying to do because it's not listed in the other parts.
Third, try something simpler. Instead of changing the background, try to get the color to change first of all. I don't know that the background will change when you hover, so I'd recommend you try something smaller first to see if it will work.
Ahhhh! That explains it! I was doing
I'm a total neophyte when it comes to this stuff.
Thanks for the help!