• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1057
  • Last Modified:

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

0
edvinson
Asked:
edvinson
  • 7
  • 5
2 Solutions
 
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now