Dant27 Posted March 20, 2006 Share Posted March 20, 2006 Hi everyone.I`m having a bit of trouble with my links. I`m using a linked style sheet and want to have 3 different link formats (different colours, behaviours etc.) on the same page.I have tried some of the W3 tutorials but cant get anywhere (not because of the tutorials, they are great!) so would appreciate your help.The site I am trying to get the multiple link styles on is here:http://www.ewportal.com/Untitled-1.htmlI want the links at the top to stay as they are, but then at the bottom of the page I need those links to be a different colour. Here is my current CSS code: body,td,th { font-family: Verdana, Arial; font-size: 12px; color: #000000;}body { background-color: #FFFFFF;}a { font-family: Verdana, Arial; color: #F16C00; font-weight: bold;}a:link { text-decoration: none;}a:visited { text-decoration: none; color: #F59C01; font-family: Verdana, Arial; font-weight: bold;}a:hover { text-decoration: none; color: #F59C01; font-family: Verdana, Arial; font-weight: bold;}a:active { text-decoration: none; color: #F16C00; font-family: Verdana, Arial; font-weight: bold;}.mainHeader { font-family: Verdana, Arial; font-size: 4pt; color: #3149A1; font-weight: bold}.factFiction { font-family: Verdana, Arial; font-size: 16px; color: #3149A1; font-weight: bold}.factFictionText { font-family: Verdana, Arial; font-size: 16px; color: #333333;}.HorizontalTblBg {background-image: url('images/line2.jpg');background-repeat: no-repeat;background-position: center; }.factFictionText { font-family: Verdana, Arial; font-size: 16px; color: #333333;} Im a bit of a CSS noob but hopefully you will be able to help.ThanksDan Link to comment Share on other sites More sharing options...
scott100 Posted March 20, 2006 Share Posted March 20, 2006 Hi Dan, if you give the anchor tags different classes you can do this. <html><head><style type="text/css">a:link {color: black}a:visited {color: black}a.red:hover {color: red}a.red:active {color: red}a.green:hover {color: green}a.green:active {color: green}a.blue:hover {color: blue}a.blue:active {color: blue}</style></head><body><a class="red" href="#">This is a red link</a><br /><a class="green" href="#">This is a green link</a><br /><a class="blue" href="#">This is a blue link</a><br /></body> Link to comment Share on other sites More sharing options...
Dant27 Posted March 20, 2006 Author Share Posted March 20, 2006 Thanks for the reply Scott, I`ll give it a try and let you know how I get on. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now