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

I want to be able to control link colors using a .class (I think) in an external CSS stylesheet. Dreamweaver doesn't seem to clearly provide that option in any of it's drop downs or requester boxes. Can it be added to the stylesheet and then be assigned to div from outside the page like that? Is it even advisable?
.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;
	vertical-align: 100%;
	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;
}

Open in new window

LVL 1
edvinsonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gamebitsCommented:
a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */
0
edvinsonAuthor Commented:
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 */ 
}

Open in new window

0
Jason C. LevineNo oneCommented:
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 {}
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

edvinsonAuthor Commented:
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??
0
edvinsonAuthor Commented:
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???
0
Jason C. LevineNo oneCommented:
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.
0
edvinsonAuthor Commented:
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 */

Open in new window

0
Jason C. LevineNo oneCommented:
>> 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.

This is a situation where you need to learn the best way to apply the CSS.  You need to separate the styles that are going to apply over the entire div and make those part of the ID declaration.  Whatever else needs to be affected becomes a class.  

The above code should work provided that your divs have the id declared in the HTML.

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
edvinsonAuthor Commented:
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.
0
edvinsonAuthor Commented:
Thank you!! again. ;-)
0
Jason C. LevineNo oneCommented:
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>

Open in new window

0
edvinsonAuthor Commented:
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?
0
Jason C. LevineNo oneCommented:
>> 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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.