Log in

View Full Version : Two link colors on one page


Bubbletin
03-13-2007, 09:01 AM
Hey everyone. Long story short, I'm returning back to my hobby of web design. I'm ultimately trying to add additional styles to my CSS to control link colors. For example.



<span class="style1">Hey guys this is link color 1</span>
<span class="style2">Hey guys this is link color 2</span>


Can someone show me how my CSS should link in order to properly add link color, hover, text decoration and etc for 2 or more styles in one CSS?

Thank you! :)

Edit: Haha figured it out, just a little bit of research. Sorry for wasting board space!
codeexploiter
03-13-2007, 09:20 AM
Check the following source code especially the CSS section of it. So that you can identify different methods



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#990000;
}
a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
}

a:visited
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#990099;
}

#one a:link
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#339933;
}

#one a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
color:#FF33CC;
}

#one a:visited
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#339966;
}

p a:link
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#0000FF;
font-weight:bold;
}

p a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:underline;
color: #993399;
font-weight:bold;
}

p a:visited
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#339966;
font-weight:bold;
}

</style>
</head>

<body>
<p><a href="http://www.google.com">Google</a> - This will use last 3 CSS rules mentioned in our style tag. </p>
<a href="http://www.google.com">Google</a> - - This will use first 3 CSS rules mentioned in our style tag. <br><br>
<div id="one"><a href="http://www.google.com">Google</a> - - This will use middle 3 CSS rules mentioned in our style tag. </div>
</body>
</html>
Bubbletin
03-13-2007, 09:36 AM
Thank you very much for the quick reply!

I wanted to ask about Dropshadows in Firefox. Can I ask that in this thread or do I need to make another? Thank you again!
codeexploiter
03-14-2007, 04:05 AM
I think it is better if you start a new thread about it.