I have some links on my website that I want to be white and when hovered over I want to be orange. Some I want to be orange and grey when hovered over. And some I want to be green and orange or grey when hovered over. Is this possible with the same syle sheet.
It is, but you'll have to tell the browser which ones should do what. I don't know what your links are in, but likely they are sitting in either ul's or boxes of some kind? You can discrimminate amongst links by referring to their parents. First, set the default colours, whichever you have the most of on your page (let's say most of your links are white and turn orange on :hover): a { color: #fff; } a:focus, a:hover { color: #fbd302; (orange) } Okay, now all your links are white until hovered (or focussed with the keyboard, don't forget keyboarders!). Now let's say the ones you want orange and grey on hover are in the main menu. <ul id="mainmenu"> <li><a href="#">link 1</a></li> <li> etc...</li> </ul> Here, you can simple say (AFTER your first "default" declaration): #mainmenu a { color: #fbd302; } #mainmenu a:focus, #mainmenu a:hover { color: #c7c7c7; (grey) } And let's say the ones you wanted in different colours, well, you'll need to give classes to the ones that are really different, but let's say they're all in a box called "advertisements": <div id="advertisements"> <p> Blah blah blah, <a href="#">buy our stuff</a> blah blah...</p> <p> More blah, and <a class="specialoffer" href="#"> get our Orange Monster Special</a> while offers last!</p> <p> blah blah blah....</p> <ul> <li><a href="#">Another offer 1</a></li> <li><a href="#"> Another offer 2 </a></li> etc... </ul> Now you could do this: #advertisements a { color: #0f0; (green) } (you don't have to set a hover colour here... remember your default was orange on hover anyway) #advertisements a.specialoffer { color: #c7c7c7; } If you wanted specialoffer to turn another colour, like red, on hover, you'd add that declaration. By default it should still turn orange on :hover until you say otherwise. #advertisement a.specialoffer:hover { color: #f00; (red) } So, it can be done, but without full support for stuff like first-child and nth child, you'll need classes if theres a particular link within a group of links that you want different. But otherwise, it's pretty easy, if you wrote your HTML well in the first place. Bring back the defaults for the links in the list inside #advertisements with #advertisements ul a { color: #fff; } #advertisements ul a:focus, #advertisements ul a:hover { color: #fbd302; } and now those ones are like the defaults, while the others are special.
Hi, Sure is possible just define individual classes for you links. See the simple page below <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>A page title</title> <style type="text/css"> [B]a.greenToOrange { color:green; } a.greenToOrange:hover { color:orange; } a.redToBlue { color:red; } a.redToBlue:hover { color:blue; }[/B] </style> </head> <body> <p><a class="[B]greenToOrange[/B]" href="#">Some link text!</a></p> <p><a class="[B]redToBlue[/B]" href="#">Another link text!</a></p> </body> </html> Code (markup): Hope this helps! gG
Classitis! Doctor, doctor! The patient is getting classitis! Try to avoid setting a class on every single link.
classitis - lol I agree but without knowing the context the links are to be used in its hard to give the definitive answer