help with styling links please

liunx

Guest
ok heres some code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>

<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a>

<br>

<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a>

</body>
</html>

---
now,
obviously that will make both links blue and on mouseover they will turn red and be underlined.

Now say i wanted to make link 1 be blue and red on mousover, and link 2 be red and blue on mouseover.

How do i do this :confused:

im sure this is a stupid question...
thanks in advanceThis what you are looking for?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">


a:link.first {
color: blue;
text-decoration: none;
}

a:hover.first {
color: red;
text-decoration: underline;
}

a:link.scnd {
color: red;
text-decoration: none;
}

a:hover.scnd {
color: blue;
text-decoration: underline;
}


</style>
</head>
<body>

<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="first">Link 1</a>

<br>

<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="scnd">Link 2</a>

</body>
</html>thats what i was lookin for... thanksTechnically (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#link-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->), that's incorrect (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.asp">http://www.w3schools.com/css/css_pseudo_classes.asp</a><!-- m -->).

It should be selector.class: pseudo-class (without the space)
 
Back
Top