CSS link color question
From time to time I get questions from former students or people that just so happen to stumble upon my website. I decided to start logging these questions on my blog in a new category called questions.
Earlier today Dan worte:
“HI
I’m in the process of creating a new web site, my template contains different colors in different areas on the page. Some of my links are located on a blue background and some are on a white background. I set the page properties links to FFFFFF (link color and visited links to FFFFFF); the problem I’m having is that the links on the white background are not showing. Is there any way to change specific link color?
Thanks for your help.
E.D”
Check out http://www.damonledet.com/tutorial/index.cfm/name/CSS_Links the code is below. Instead of color: blue you can use hexadecimal colors like #FFFFFF
When you create the link make sure you add a class=”linkset2″ in the < a href > tag of course you can change the “linkset2″ name, if you would like but be sure you also change it in the a.linkset2:link and so on. Using this trick will allow you to have as many link colors as you would like ie a.linkset3:link, a.linkset4:link … If you really want to use best practices you should attach an external css file so all the pages in your site can use your linkset. The way I did it below is page specific.
<html>
<head>
<meta http-equiv=“content-type” content=“text/html;charset=iso-8859-1″>
<title>CSS two color link page</title>
<style type=“text/css” media=“screen”>
<!–
a:link { color: blue }
a:visited { color: blue }
a:hover { color: purple }
a:active { color: red }
a.linkset2:link { color: purple }
a.linkset2:visited { color: purple }
a.linkset2:hover { color: olive }
a.linkset2:active { color: red }
–>
</style>
</head>
<body bgcolor=“#ffffff”>
<p><a href=“#”>Link 1</a></p>
<p></p>
<p><a href=“#” class=“Linkset2″>Link 2</a></p>
</body>
</html>
Another, and perhaps more expandable way to do it would be through child-specification, like this:
.white-area-class a { color: blue; }
.blue-area-class a { color: white; }
This way, any links in the div or other block-level element that has class="white-area-class" will be blue, and vice versa, without having to add a class to the links individually.
Thanks a bunch Brad! I never thought of doing it that way.
I did this one when I was still with SLA – not sure if it holds up with all the changes over time…
http://euthanized.org/tutorials/webdesign/css/CSS.htm
Good to hear from you Mr. Hope. You have been a stranger lately
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm