-
I have a CSS question, and I've been searching around the web trying to find the answer or another site that does what I want so that I can look at their code, but I'm not having any luck. Now, I'm hoping that you guys might be able to help me. :-)
I'm redoing my personal website, and I want each of the links to be a different color on mouseover, like "purpose" will change to yellow, "services" will be orange, etc. I know it sounds tacky but I think it's going to look nice. Anyway, I have an external style sheet, but I'm thinking that I need an inline style, too. The trouble is, I can't figure out what the a href tag should look like with an inline style. I would be very grateful if someone could either post sample code for a link tag with a:link and a:active styles or if someone could point me toward a website that does what I want to do so that I can look at their code.
Thank you!!!
Michelle
-
I have a CSS question, and I've been searching around the web trying to find the answer or another site that does what I want so that I can look at their code, but I'm not having any luck. Now, I'm hoping that you guys might be able to help me. :-)
I'm redoing my personal website, and I want each of the links to be a different color on mouseover, like "purpose" will change to yellow, "services" will be orange, etc. I know it sounds tacky but I think it's going to look nice. Anyway, I have an external style sheet, but I'm thinking that I need an inline style, too. The trouble is, I can't figure out what the a href tag should look like with an inline style. I would be very grateful if someone could either post sample code for a link tag with a:link and a:active styles or if someone could point me toward a website that does what I want to do so that I can look at their code.
Thank you!!!
Michelle
-
<blockquote>like "purpose" will change to yellow, "services" will be orange, etc.</blockquote>
Use ID selectors to tell the different links apart. eg. CSS:</p><blockquote><code>#purpose:hover { color: yellow }</code></blockquote>
HTML:</p><blockquote><code><a href="purpose.html" id="purpose">Purpose</a></code></blockquote>
Won't work on Netscape 4, which doesn't understand 'hover' (and can only do rollovers with JavaScript and images), but it's fine on IE, Mozilla and Opera.</p>
-
Thanks Andrew! I was just coming back to post a message saying that I had figured out how to do it when I saw your message - thanks for taking the time to reply!
I figured it out with help from the css faq at http://css.nu/faq/ciwas-aFAQ.html and what I did was very similar to what you suggested. Here is a small sample of my code:
In the style sheet I put
a.purpose:hover { color: #ffff33; text-decoration: none}
a.purpose:active { color: #ffff99; text-decoration: none}
and then in the html I have
< a class="purpose" href="purpose.html" >
If you'd like to see it, my url is http://michelleswebdesigns.com
Thanks!
Michelle
