why dont the link properties via page properties and css style, work correctly. the visited property becomes the colour of the link and the link property does nothing!!!!!Obviously you are doing something wrong.
a {/* these properties are applied to all <a>. cascade rules will override these when used with pseudo classes */}
/* Pseudo classes for links */
a:link {/* Link properties here */}
a:visited {/* Vlink properties here */}
a:active {/*Alink properties here */}
a:hover {/* hover properties here */}Speaking of Links, why don't you post one if your problem continues??
In the W3 CSS2 specs (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->), the order matters in which you write the pseudo-classes for the <a> tag. The W3C recommends writing it in the following way, and it seems to work best for me in practice:
A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { color: yellow } /* user hovers */
A:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
Then, you can add different classes so that you can many different styles of links on one web page.
a.className
seudoClass { style statements here }
EX:
a.mainMenu:link { ... }
a.mainMenu:visited { ... }
a.mainMenu:hover { ... }
a.mainMenu:active { ... }
Of course you would replace the three periods (...) with the style statements you want to affect the <a> tag. Then, to apply the styles for the mainMenu class to a link, just write:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html" class="mainMenu">Link Text</a>see following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"mainlinks.css" rel=stylesheet" type="text/css">
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK</a>
</body>
</html>
/*mainlinks.css*/
a:link {
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #FF00FF;
}Try this. The css should be inside style tags if its in the html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"mainlinks.css" rel=stylesheet" type="text/css">
<style type="text/css">
a:link {
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #FF00FF;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK</a>
</body>
</html>
Also, why didn't you put this code in the external stylesheet? You've referred to 'mainlinks.css', which is where the code could go as you've inserted it.
DaveOh right I see...
The bit you've inserted under /*mainlinks.css*/ is supposed to be an external file...
That code should be pasted into notepad, and saved with the filename 'mainlinks.css'. You can then delete the tht code off your page, and just put the link
<link href=http://www.webdeveloper.com/forum/archive/index.php/"mainlinks.css" rel=stylesheet" type="text/css">
in the head of each page.
Dave
a {/* these properties are applied to all <a>. cascade rules will override these when used with pseudo classes */}
/* Pseudo classes for links */
a:link {/* Link properties here */}
a:visited {/* Vlink properties here */}
a:active {/*Alink properties here */}
a:hover {/* hover properties here */}Speaking of Links, why don't you post one if your problem continues??
In the W3 CSS2 specs (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->), the order matters in which you write the pseudo-classes for the <a> tag. The W3C recommends writing it in the following way, and it seems to work best for me in practice:A:link { color: red } /* unvisited links */
A:visited { color: blue } /* visited links */
A:hover { color: yellow } /* user hovers */
A:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
Then, you can add different classes so that you can many different styles of links on one web page.
a.className
seudoClass { style statements here }EX:
a.mainMenu:link { ... }
a.mainMenu:visited { ... }
a.mainMenu:hover { ... }
a.mainMenu:active { ... }
Of course you would replace the three periods (...) with the style statements you want to affect the <a> tag. Then, to apply the styles for the mainMenu class to a link, just write:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"blah.html" class="mainMenu">Link Text</a>see following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"mainlinks.css" rel=stylesheet" type="text/css">
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK</a>
</body>
</html>
/*mainlinks.css*/
a:link {
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #FF00FF;
}Try this. The css should be inside style tags if its in the html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"mainlinks.css" rel=stylesheet" type="text/css">
<style type="text/css">
a:link {
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #FF00FF;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK</a>
</body>
</html>
Also, why didn't you put this code in the external stylesheet? You've referred to 'mainlinks.css', which is where the code could go as you've inserted it.
DaveOh right I see...
The bit you've inserted under /*mainlinks.css*/ is supposed to be an external file...
That code should be pasted into notepad, and saved with the filename 'mainlinks.css'. You can then delete the tht code off your page, and just put the link
<link href=http://www.webdeveloper.com/forum/archive/index.php/"mainlinks.css" rel=stylesheet" type="text/css">
in the head of each page.
Dave