How do I define Link Colors, Normal, Hover and Visited in an external style sheet (attached)

Thank you but ss this correct because it's not working?
Must have something out of whack.

.createacct {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFF00;
	position: absolute;
	left: 22px;
	top: 389px;
	z-index: 11;
}
.footer {
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-align: left;
}
.bodytext1 {
	position: absolute;
	left: 175px;
	top: 183px;
	width: 360px;
	height: 708px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	padding: 10px;
	border: thin double #CCCCCC;
	line-height: normal;
	background-color: #FFFFFF;
}
.searchform {
	position: absolute;
	left: 175px;
	top: 152px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	width: 230px;
	margin: 0px;
	padding: 0px;
}
 
.bodytext2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	position: absolute;
	left: 573px;
	top: 182px;
	width: 179px;
	height: 719px;
	border: 2px solid #CCCCCC;
	padding: 5px;
	z-index: 20;
	background-color: #FFFFFF;
}
.createacct {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFF00;
}
.account {
	position: absolute;
	width: 483px;
	height: 344px;
	left: 196px;
	top: 175px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFFFFF;
}
.links {
	a:link {color: #FFFF00}     /* unvisited link */
	a:visited {color: #CCCCCC}  /* visited link */
	a:hover {color: #FFFFFF}   /* mouse over link */
	a:active {color: #0000FF}   /* selected link */ 
}

Select allOpen in new window

Ed,

Don't make it a class.

Just this in the stylesheet:

       a:link {color: #FFFF00}     /* unvisited link */
        a:visited {color: #CCCCCC}  /* visited link */
        a:hover {color: #FFFFFF}   /* mouse over link */
        a:active {color: #0000FF}   /* selected link */


Do not wrap it with .links {}

ahh I see. How do I assign a different body of text links with different colors? Just have to create a separate style sheet I assume??

Here's what I'm getting at: www.plugasong.com/index2.php

The links on the left now work thanks to your advice, gamebits and Jason...but the dynamic data in the next block over has a link in it that is barely readable.

Best approach???

You need to use the IDs to define different sets of link behaviors.

Like so:


#indexmainleft_ a:link {color: #FFFF00}     /* unvisited link */
#indexmainleft_ a:visited {color: #CCCCCC}  /* visited link */
#indexmainleft_ a:hover {color: #FFFFFF}   /* mouse over link */
#indexmainleft_ a:active {color: #0000FF}   /* selected link */

#indexmainbody_ a:link {color: #FFFF00}     /* unvisited link */
#indexmainbody_ a:visited {color: #CCCCCC}  /* visited link */
#indexmainbody_ a:hover {color: #FFFFFF}   /* mouse over link */
#indexmainbody_ a:active {color: #0000FF}   /* selected link */


The first set should affect the left side only.  The second set will affect the middle.  Change the colors to suit yourself.

OK..I'll try to figure it out. Looks like when I assign the div the new ID's it completely messes up my fonts and positioning I already had, effectively removing the class I put to it.

Here's what I added to the index2.css

.createacct {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFF00;
	position: absolute;
	left: 22px;
	top: 389px;
	z-index: 11;
}
.footer {
	position: absolute;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-align: left;
}
.bodytext1 {
	position: absolute;
	left: 175px;
	top: 183px;
	width: 360px;
	height: 708px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	padding: 10px;
	border: thin double #CCCCCC;
	line-height: normal;
	background-color: #FFFFFF;
}
.searchform {
	position: absolute;
	left: 175px;
	top: 152px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	width: 230px;
	margin: 0px;
	padding: 0px;
}
 
.bodytext2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	position: absolute;
	left: 573px;
	top: 182px;
	width: 179px;
	height: 719px;
	border: 2px solid #CCCCCC;
	padding: 5px;
	z-index: 20;
	background-color: #FFFFFF;
}
.createacct {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFF00;
}
.account {
	position: absolute;
	width: 483px;
	height: 344px;
	left: 196px;
	top: 175px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFFFFF;
}
 
	
 
#indexmainleft_ a:link {
	color: #FFFF00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: absolute;
	font-size: 10px;
}     /* unvisited link */
#indexmainleft_ a:visited {color: #CCCCCC}  /* visited link */
#indexmainleft_ a:hover {color: #FFFFFF}   /* mouse over link */
#indexmainleft_ a:active {color: #0000FF}   /* selected link */ 
 
#indexmainbody_ a:link {color: #FFFF00}     /* unvisited link */
#indexmainbody_ a:visited {color: #CCCCCC}  /* visited link */
#indexmainbody_ a:hover {color: #FFFFFF}   /* mouse over link */
#indexmainbody_ a:active {color: #0000FF}   /* selected link */

Select allOpen in new window

Great. Thanks Jason. I'll mess with it a bit tonight. I'm thinking maybe it would just be best to try and implement Inline styles in small cases like this..??? i tried putting the Link styles under each of the .classes individually but that didn't work either.

Thank you!! again. ;-)

The link states are not "typical" CSS behaviors where you have an ID or a Class or an inline event.  This stuff is called pseudo-selectors since the same tag is being modified 4 different ways depending on how the page is interacted with.  In fact, you can't inline the link states (hover, visiting, active).

The only way to do it is as I have described above.  A div has an id and the CSS has different link behaviors depending on the ids.  Here's a sample page to show the concept

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#One a:link {
	color: #FF0000;
	text-decoration: none;
}
#One a:visited {
	text-decoration: none;
	color: #009900;
}
#One a:hover {
	text-decoration: underline;
	color: #0000FF;
}
#One a:active {
	text-decoration: none;
	color: #FF00FF;
}
 
#Two a:link {
	color: #00FF00;
	text-decoration: underline;
}
#Two a:visited {
	text-decoration: underline;
	color: #FF0000;
}
#Two a:hover {
	text-decoration: none;
	color: #CCCCCC;
}
#Two a:active {
	text-decoration: underline;
	color: #FFFF00;
}
 
#One {
	font-family: Arial, Helvetica, sans-serif;
}
#Two {
	font-family: "Times New Roman", Times, serif;
}
-->
</style>
</head>
 
<body>
<div id="One"><a href="#">Link 1</a></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="Two"><a href="#">Link 2</a></div>
</body>
</html>

Select allOpen in new window

ahh yes. I'm beginning to get a grasp. I have a ton of books here and am digging in too. Once I get it, I'll have it of course, but I just hate reinventing the wheel and am trying to get my first pages intact before I go copying them sitewide.
Thanks for your help and patience.

You are an amazing asset!!  I'm going to be having some SQL questions pretty soon. Are you pretty good at that?

>> I'm going to be having some SQL questions pretty soon. Are you pretty good at that?

I'm okay with SQL stuff.  Not my strongest suit, but I can get by without too much difficulty.