By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,702 Members | 1,771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,702 IT Pros & Developers. It's quick & easy.

Changing Color/Font/Size of Visited Links

P: 2
I know how to adjust the look of visited links with a CSS stylesheet, but how would one create individual variations among a set of links?

For example, say I have three links, all initially looking the same. After clicking, I want the first to change to red, the second to be blue, the third to be green.

Changing the color seems to be easiest, but if possible, I'd also like the visited links to vary by size, font, and maybe decoration style (bold, italic, underline, strikethrough).

This is for a creative project, in which I've taken a body of text and placed in it somewhat subtle links. Each link triggers an image/piece of text/video to pop up in a surrounding inline frame. After the link has been "found" in the body of text, I want it to stand out (therefore, change the style of the link once it has been visited).

Thoughts? Thank you!
Nov 4 '08 #1
Share this Question
Share on Google+
2 Replies

P: 44
You can use different classes to style the links differently. Define your css like this:

Expand|Select|Wrap|Line Numbers
  1. a.link1:link{ ... styles here ...}
  2. a.link1:visited{ ... styles here ...}
  3. a.link1:hover{ ... styles here ...}
  4. a.link1:active{ ... styles here ...}
  6. a.link2:link{ ... styles here ...}
  7. a.link2:visited{ ... styles here ...}
  8. a.link2:hover{ ... styles here ...}
  9. a.link2:active{ ... styles here ...}
  11. ...
Then assign the classes to each link:

Expand|Select|Wrap|Line Numbers
  1. <a href="..." class="link1">...</a>
  2. <a href="..." class="link2">...</a>
  3. ...
Hope that helps.
Nov 5 '08 #2

P: 2
Thanks! That should do it.
Nov 6 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.