I'm having problems with link colors. The white color for a:link looks good in the header because the header is a dark shade of blue, but links in the body don't show up because the body is an off-white color. How can I make the header links white and make the links in the body a different color? Here is my code:
a:link { color: #FFFFFF; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #fef72a; text-decoration: none; }
a:active {color: #46b238; text-decoration: none; }
td,body,p {
font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: x-small;, scrollbar-base-color:#3861b1;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>link styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#header {background:blue;}
#header a {color:white;}
#header a:hover {color:red;}
#body {background:snow;}
#body a {color:grey;}
#body a:hover {color:green;}
-->
</style>
</head>
<body>
<div id="header">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">test1</a>
</div>
<div id="body">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">test2</a>
</div>
</body>
</html>You can make the link, hover, active, vistited states be subject to a class identifier.
by giving them unique classes or id's they will behave differently. For example:
css code:
#header a:link { color: #FFFFFF; text-decoration: none; }
#header a:visited { color: #000000; text-decoration: none; }
#header a:hover { color: #fef72a; text-decoration: none; }
#header a:active {color: #46b238; text-decoration: none; }
#maincontent a:link { color: #000000; text-decoration: none; }
#maincontent a:visited { color: #999999; text-decoration: none; }
#maincontent a:hover { color: #CCCCCC; text-decoration: none; }
#maincontent a:active {color: #4C4C4C; text-decoration: none; }
then give the areas of your html that you want to affect the id's that you've set up in CSS. Example:
<div id="header"><a href=http://www.webdeveloper.com/forum/archive/index.php/"monkey.com">monkey</a>
<div id="maincontent><a href=http://www.webdeveloper.com/forum/archive/index.php/"elephant.com">elephant</a>
id's are for unique (1 instance) usage. For multiple usages go with class which would be donoted in CSS as .header instead of #header.sorry Fang, inadvertantly cross posted.
You're a little quicker on the draw. . .
No problem Ok thnaks guys that seems simple enough, but let me clarify something. Do I just get rid of my current styles.css and remove this link
< link href=http://www.webdeveloper.com/forum/archive/index.php/"../styles.css" rel="stylesheet" type="text/css">
from my pages and replace it with something like this
<style type="text/css">
<!--
.header {background:blue;}
.header a {color:white;}
.header a:hover {color:red;}
.body {background:snow;}
.body a {color:grey;}
.body a:hover {color:green;}
-->
</style>
And add div to all my links?
<div id="header">
<div id="body">You can add the style rules to your style sheet.actually you've got
.header {background:blue;}
.header a {color:white;}
.header a:hover {color:red;}
the "." in ".header" signifies that it is a class
so you should have
<div class=header>
<div class=body>
instead of
<div id="header">
<div id="body">If 'body' and 'header' are unique identifiers use id
class v id (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClassesVsIds">http://css-discuss.incutio.com/?page=ClassesVsIds</a><!-- m -->)I tried this
.header {
a:link { color: #FFFFFF; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #fef72a; text-decoration: none; }
a:active {color: #46b238; text-decoration: none; }
}
.body {
a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #000000; text-decoration: none; }
a:active {color: #000000; text-decoration: none; }
}
<div class="header"><a href=''>Header Link</a></div>
<div class="body"><a href=''>Body Link</a></div>
and it doesn't do anything. All the links are default colored and underlined! I have all the css code in a stylesheet and a link to it in my pages.Look at the second and third entries in this thread; idI'm just going to point out that if you have an attribute on all of the states of a link(hover, visited, etc) you can just define it in the a:link part, and call it good.
As an example. This...
a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #000000; text-decoration: none; }
a:active {color: #000000; text-decoration: none; }
Becomes this...
a:link { color: #000000; text-decoration: none; }
I would NOT recommend having a link look the same in all states though. Having a link change when it is at least hovered over is always a good thing.
You can further reduce that code by using the shorthand version of CSS. For a color such as #000000 can be reduced to #000 since each of the numbers are just repeated in the longer form. This would make your header link code look more like this...
.header a:link { color: #FFF; text-decoration: none; }
.header a:visited { color: #000; }
.header a:hover { color: #fef72a; }
.header a:active {color: #46b238; }
a:link { color: #FFFFFF; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #fef72a; text-decoration: none; }
a:active {color: #46b238; text-decoration: none; }
td,body,p {
font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: x-small;, scrollbar-base-color:#3861b1;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>link styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#header {background:blue;}
#header a {color:white;}
#header a:hover {color:red;}
#body {background:snow;}
#body a {color:grey;}
#body a:hover {color:green;}
-->
</style>
</head>
<body>
<div id="header">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">test1</a>
</div>
<div id="body">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">test2</a>
</div>
</body>
</html>You can make the link, hover, active, vistited states be subject to a class identifier.
by giving them unique classes or id's they will behave differently. For example:
css code:
#header a:link { color: #FFFFFF; text-decoration: none; }
#header a:visited { color: #000000; text-decoration: none; }
#header a:hover { color: #fef72a; text-decoration: none; }
#header a:active {color: #46b238; text-decoration: none; }
#maincontent a:link { color: #000000; text-decoration: none; }
#maincontent a:visited { color: #999999; text-decoration: none; }
#maincontent a:hover { color: #CCCCCC; text-decoration: none; }
#maincontent a:active {color: #4C4C4C; text-decoration: none; }
then give the areas of your html that you want to affect the id's that you've set up in CSS. Example:
<div id="header"><a href=http://www.webdeveloper.com/forum/archive/index.php/"monkey.com">monkey</a>
<div id="maincontent><a href=http://www.webdeveloper.com/forum/archive/index.php/"elephant.com">elephant</a>
id's are for unique (1 instance) usage. For multiple usages go with class which would be donoted in CSS as .header instead of #header.sorry Fang, inadvertantly cross posted.
You're a little quicker on the draw. . .
No problem Ok thnaks guys that seems simple enough, but let me clarify something. Do I just get rid of my current styles.css and remove this link < link href=http://www.webdeveloper.com/forum/archive/index.php/"../styles.css" rel="stylesheet" type="text/css">
from my pages and replace it with something like this
<style type="text/css">
<!--
.header {background:blue;}
.header a {color:white;}
.header a:hover {color:red;}
.body {background:snow;}
.body a {color:grey;}
.body a:hover {color:green;}
-->
</style>
And add div to all my links?
<div id="header">
<div id="body">You can add the style rules to your style sheet.actually you've got
.header {background:blue;}
.header a {color:white;}
.header a:hover {color:red;}
the "." in ".header" signifies that it is a class
so you should have
<div class=header>
<div class=body>
instead of
<div id="header">
<div id="body">If 'body' and 'header' are unique identifiers use id
class v id (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClassesVsIds">http://css-discuss.incutio.com/?page=ClassesVsIds</a><!-- m -->)I tried this
.header {
a:link { color: #FFFFFF; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #fef72a; text-decoration: none; }
a:active {color: #46b238; text-decoration: none; }
}
.body {
a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #000000; text-decoration: none; }
a:active {color: #000000; text-decoration: none; }
}
<div class="header"><a href=''>Header Link</a></div>
<div class="body"><a href=''>Body Link</a></div>
and it doesn't do anything. All the links are default colored and underlined! I have all the css code in a stylesheet and a link to it in my pages.Look at the second and third entries in this thread; idI'm just going to point out that if you have an attribute on all of the states of a link(hover, visited, etc) you can just define it in the a:link part, and call it good.
As an example. This...
a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #000000; text-decoration: none; }
a:active {color: #000000; text-decoration: none; }
Becomes this...
a:link { color: #000000; text-decoration: none; }
I would NOT recommend having a link look the same in all states though. Having a link change when it is at least hovered over is always a good thing.
You can further reduce that code by using the shorthand version of CSS. For a color such as #000000 can be reduced to #000 since each of the numbers are just repeated in the longer form. This would make your header link code look more like this...
.header a:link { color: #FFF; text-decoration: none; }
.header a:visited { color: #000; }
.header a:hover { color: #fef72a; }
.header a:active {color: #46b238; }