Help with overriding CSS links [Archive]

Click to See Complete Forum and Search --> : Help with overriding CSS links

cdewsnip

07-26-2006, 07:16 AM

Is it possible to override the link styles that have been applied to a certain style? I have a style called listingpage which defines the links in the table as being normal grey text. However, I also want to put in links within the listing section which are blue and bold. How do I override the style that I assigned to the listingpage style? I tried using a span class but that didn't override it and the links stayed grey as normal. My styles are as follows:

.listingpage table td a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #3082AD;
font-weight: bold;
}
.listingpage table td a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #3082AD;
font-weight: bold;
}
.bluebold a:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #333333;
font-size: 11px;

}
.bluebold a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #333333;
font-size: 11px;
}

I am trying to use the style as follows:

<div class="listingpage">
<table>
<tr>
<td>text <a href="#">link</a></td>
<td> More text <span class="bluebold"><a href="#">more</a></span>
<td>text <a href="#">link</a></td>
</td>
</table>
</div>

I know it has something to do with the nesting of the styles and the fact that the listingpage style is more specific but I am not sure how I can override it. I have a generic link style as well which is slightly different again so I don't just want to move the grey link into the main style. Any help is most appreciated.

WebJoel

07-26-2006, 07:36 AM

If an external STYLE says "do this", that is how it'll be done.
If in your HTML page you want the affected item to do something other than "do this", then give that a style="" of it's own. It is 'closer' to the affected element, and that is the style that will be obeyed and applied.

I haven't looked too closely at your code yet, btw.

Another thing is that if you added a STYLE declaration that begins with a "!" ("important", such as #thisDIV {!font-family:NAME; Color:#nnn;} or whatever...), THAT rule becomes the overriding one and the one that will be used, and can be 'external' and still be the dominant STYLE rule for that element.
I have seen this in code before, -haven't had to do this myself yet but that is what it is supposed to do. It gives precedence to that style over any other for that element (link, etc.), even if there is a "style="" " in the HTML for that element...

cdewsnip

07-26-2006, 07:48 AM

Thanks for your reply. I actually already have a separate style for both links but it is still not working. Any further help is most appreciated.

Cheers,

Cara

Siddan

07-26-2006, 08:32 AM

Do this:

First: Since you are using tables anyways it is uneccessary to wrap a classed Div around it. put the class inside the table instead
HTML <table class="listingpage">
CSS .listingpage a:link or ( table.listingpage a:link )

Secondly: Instead of putting an A tag inside of a span, put the class directly inside the A tag
HTML <a class="bluebold" href="#">more</a>
CSS a:link.bluebold

and there you are.
Note! if you chose to have it like TABLE.LISTINGPAGE A:LINK then you also must have TABLE A:LINK.BLUEBOLD, to have the same path like for both

WebJoel

07-26-2006, 08:34 AM

I'm not understanding what you're trying to do. I did correct some of your HTML though...

<body>
<div class="listingpage">
<table>
<tr>
<td>text <a href="#">link</a></td>
<td> More text <span class="bluebold"><a href="#">more</a></span>
</td>
<td>text <a href="#">link</a></td>
</tr>
</table>
</div>
</body>
</html>

Siddan

07-26-2006, 08:53 AM

I believe he wants to set a different link color inside an already link styled area