links with css

liunx · Jan 9, 2008

hi 
 
please could you guide me through the syntax for setting class id's for links.i know the normal routine for setting the links for the whole page but i need to use the id attribute... 
 
<STYLE type="text/css"> 
 
 
</STYLE> 
 
<a ID="mains" href=http://www.htmlforums.com/archive/index.php/"matts.html">Matts Page</a> 
paragraph goes here 
 
the skins bit works but not the links 
 
thanks 
 
DaFunkThere are a couple of workarounds for this. First, you could just define the overall styles for all Anchor tags: 
 
<html> 
<head><title>blah</title> 
<style type="text/css"> 
A:link{ color:red; } 
A:visited { color:green; } 
#skins { font-family: arial; font-size: 20; font-style: bold; color: red; } 
</style> 
</head> 
<body bgcolor="#ffffff" text="#000000" id=all topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> 
<a href=http://www.htmlforums.com/archive/index.php/"matts.html">Matts Page</a> 
paragraph goes here 
</body> 
</html> 
 
By defining the overall styles for all links, it won't be necessary to include an ID in the actual <a href> tag. 
 
However, if you need more flexibility for your link colors (e.g. you have set all links to color: red, and you need to display a link in a <td> with a bgcolor of red), you can override the style for all links by including an ID (defining the color) for that link specifically... 
 
<html> 
<head><title>blah</title> 
<style type="text/css"> 
A:link{ color:red; } 
A:visited { color:green; } 
#skins { font-family: arial; font-size: 20; font-style: bold; color: red; } 
#white { color: white; } 
</style> 
</head> 
<body bgcolor="#ffffff" text="#000000" id=all topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> 
<table border=0> 
<tr> 
<td bgcolor="red"> 
<a href=http://www.htmlforums.com/archive/index.php/"matts.html" id="white">Matts Page</a> 
</td> 
</tr> 
<tr> 
<td> 
paragraph goes here 
</td></tr> 
</table> 
</body> 
</html> 
 
The above will work for all color attributes of the link, (color)will stay the same for visited AND active links. 
 
I hope this was useful to you. 
 
SillyfishI think what you are after is class (.class). 
If you define a class it can be assigned to one or more tags in your page. This way all the links belonging to the (white) group you simply give class="white" in the tag, and the others you want to be red should have class="red" in the tag. Using ID's should only be used for INDIVIDUAL elements which will not be repeated throughout the page. 
 
<html> 
<head> 
<style type="text/css"> 
A.white:link {color: white; background-color: red;} 
A.white:visited {color: black; background-color: red;} 
A.white:active {color: yellow; background-color: blue;} 
A.white:hover {color: white; background-color: blue;} 
 
A.red:link {color: red; background-color: white;} 
A.red:visited {color: brown; background-color: white;} 
A.red:active {color: black; background-color: red;} 
A.red:hover {color: white; background-color: red;} 
</style> 
</head> 
<body> 
<a href=http://www.htmlforums.com/archive/index.php/"somepage.html" class="white">Hi there</a> 
<a href=http://www.htmlforums.com/archive/index.php/"somepage.html" class="red">Hi there</a> 
</body> 
</html> 
 
Alternatively you can set up a standard class and simply define the differences as needed, eg 
 
.white {font-family: arial,verdana; font-size 14pt;} 
A.white:hover {color: white; } 
A.white:visited {color: yellow;} 
A.white: active {color: orange;} 
A.white:hover { color: red;}While sillyfish is corrrect, he/she has avoided the question. Setting class ID's is very simple. And its nice because you can have different links do different things instead of setting a global parameter for all links. 
In the HEAD section plac ecode like this: 
 
<STYLE type="text/css"> 
 
</STYLE> 
 
then in the body just reffer to the class ID for any links: 
 
<A class=class1 href=http://www.htmlforums.com/archive/index.php/"http://www.yahoo.com">Yahoo</a> 
<A class=class1 href=http://www.htmlforums.com/archive/index.php/"http://www.msn.com">MSN</a> 
<A class=class1 href=http://www.htmlforums.com/archive/index.php/"http://www.exite.com">Exite</a> 
<A class=class2 href=http://www.htmlforums.com/archive/index.php/"http://www.altavista.com">Altavista</a> 
<A class=class2 href=http://www.htmlforums.com/archive/index.php/"http://www.infoseek.com">Infoseek</a> 
<A class=class2 href=http://www.htmlforums.com/archive/index.php/"http://www.hotbot.com">Hotbot</a> 
 
 
Regards, 
KevinInteresting response and nice insight kevin and kdj... I hadn't considered implementing a class for links as shown by the both of you. This will no doubt make life much easier. Thanks for the input! 
 
-Sillyfishyeah that works fine in msie but what about that old dog netscape.. 
 
take a look i might be doing something wrong 
 
<a class="postlink" href="http://www.dreamwater.org/mattsplace/index.html">http://www.dreamwater.org/mattsplace/index.html</a> 
 
if you use msie first and then netscape you will notice the difference. Select code from the main page 
 
Wouldnt it be wonderful if browsers read html and css the same way. 
 
so how do i have different coloured links in netscape 
cheers 
 
DaFunk

links with css

liunx

Guest