Richard Korts
asked on
Overriding css link color
I'm trying to override the css specified link color for specific links. It doesn't work.
Here's the css:
a:link {
color: #FFFFFF;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
a:link.blackone {
color: #000000;
font-family: tahoma;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
Here's my html:
<tr>
<td colspan="2" class="pt9"><b>Our Portfolios:</b><br><br>
<a class="blackone" href="pfolio_wws.htm">Walk s, Walls & Steps</a> | <a class="blackone" href="pfolio_patios.htm">P atios</a> | <a class="blackone" href="pfolio_landscaping.h tm">Landsc aping</a>< /font></td >
</tr>
See www.rkassociates.com/evergreend/pfolio_patios.htm
In FireFox the LAST link is correct, the other two text is white.
What's wrong
Here's the css:
a:link {
color: #FFFFFF;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
a:link.blackone {
color: #000000;
font-family: tahoma;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
Here's my html:
<tr>
<td colspan="2" class="pt9"><b>Our Portfolios:</b><br><br>
<a class="blackone" href="pfolio_wws.htm">Walk
</tr>
See www.rkassociates.com/evergreend/pfolio_patios.htm
In FireFox the LAST link is correct, the other two text is white.
What's wrong
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
To scrathcyboy:
The inline version worked. The other was exactly what I already had, so it didn't work in the first place.
How can I change the "hover" color, in-line?
The inline version worked. The other was exactly what I already had, so it didn't work in the first place.
How can I change the "hover" color, in-line?
< A href= "file.html" style="A.hover color:#0CFFFF; A.visited color:#0000CC;" >
try that, it is all in the symantics of the right colons, spaces, periods and equals signs.
If one layout doesn't work, try another, it is only way to learn the "difficult" CSS terminology.
Remember, after each CSS statement, there must be a semi colon, and " " enclosing the lot.
try that, it is all in the symantics of the right colons, spaces, periods and equals signs.
If one layout doesn't work, try another, it is only way to learn the "difficult" CSS terminology.
Remember, after each CSS statement, there must be a semi colon, and " " enclosing the lot.
There isn't a way to change the "hover" color using in-line CSS. You'll need to do that through javascript.
When you're trying to target a class in CSS though, you need to specify the class first before you can specify hover or visited:
INSTEAD OF:
a:hover.class
USE:
a.class:hover
When you're trying to target a class in CSS though, you need to specify the class first before you can specify hover or visited:
INSTEAD OF:
a:hover.class
USE:
a.class:hover
ASKER
To scrathcyboy:
The hover doesn't work. But you answered the basic question. You get the points.
I thought CSS was the be-all, end-all. I also though you could OVERRIDE global css with local.
I am going to fix this by using <a href> with images & mouseover / mouseout to get the desired effect.
The hover doesn't work. But you answered the basic question. You get the points.
I thought CSS was the be-all, end-all. I also though you could OVERRIDE global css with local.
I am going to fix this by using <a href> with images & mouseover / mouseout to get the desired effect.
*sigh* You can override it.
Perhaps fixing your HTML and CSS errors would resolve this.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
I don't remember if it makes a difference, but it's more common to put pseudo-classes last, so "a:link.blackone" would be "a.blackone:link".
Also it's best to avoid naming classes based on their appearance.
Perhaps fixing your HTML and CSS errors would resolve this.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
I don't remember if it makes a difference, but it's more common to put pseudo-classes last, so "a:link.blackone" would be "a.blackone:link".
Also it's best to avoid naming classes based on their appearance.
HTML:
<a href="LINK">Link Name</a>
CSS:
a { color: #COLOR }
a:visited { color: #COLOR }
a:hover { color: #COLOR }
/* USING A CSS CLASS */
HTML:
<a href="LINK" class="link">Link Name</a>
CSS:
a.link { color: #COLOR }
a.link:visited { color: #COLOR }
a.link:hover { color: #COLOR }
Feel free to include whatever other styles you want in there.