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.

Code:

<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

Code:

<!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.

Thread: Two link colors on one page

Thread Tools

Search Thread

Two link colors on one page

Bookmarks

Bookmarks

Posting Permissions