adding style to LinkButton without overriding css

Question

So it looks like if I add style such as background color to LinkButton in my .cs code, it overrides any css I have that applies to it.

is there any way to add style rather than replace it in my code behind? Thanks! I am using link button as a menu, so active linkButton should have different background color. so my solution was when the user clicks on the link button in my event handler I do something like:

   lnkView.BackColor = System.Drawing.Color.FromName("#369");

But then my hover style which I have in my css will no longer work:

.navlist a:hover
{
    color: #fff;
    background-color: #369;
    text-decoration: none;
}

in my aspx:

<ul class="navlist">
        <li><asp:LinkButton ID="lnkView" runat="server">view</asp:LinkButton></li>
        <li><asp:LinkButton ID="lnkCreateNew" runat="server">create new</asp:LinkButton></li>
    </ul>

Answer 1

EDIT: Your question is unclear, but you appear to be mis-understanding CSS. Adding background-color to the style property will not cause it to completely ignore any CSS rules. Rather, it will override any CSS rules for the background-color property, but will not affect any other rules.

If you don't want to override the background-color property from the CSS rule, add the !important flag to the CSS rule in :hover, like this:

background-color: #369 !important;

Also, change the color so that the change wil be noticable.

Alternatively, you could add a new CSS rule for .navlist a:link .Active with your background color, then add the Active class in code. (lnkView.CssClass += "Active")

By the way, instead of calling Color.FromName, you should write Color.FromArgb(0x33, 0x66, 0x99).

Answer 2

Any inline styles will always override any inherited styles from the head of a document or an external css file. The only other option would be to add a javascript function that overrides the style of the object after DOM ready or Window ready event.

Answer 3

Not sure of your use here, as your question isn't real clear. However this could be an option as well.

Have two css styles:

.navlistafteranaction a:link
    {
        color: #fff;
        background-color: #123;
        text-decoration: none;
    }

.navlist a:link
    {
        color: #fff;
        background-color: #123;
        text-decoration: none;
    }

Then in your code behind just switch your CSSClass:

lnkbtn.CssClass = "navlistafteranaction";

This would change the class to have whatever style you wanted after the fact.

Answer 4

If I understand what you want correctly, you want different styles applied based on whether the linkbutton is being hovered over? So, have the style you have but also have:

.navlist a:link
    {
        color: #fff;
        background-color: #123;
        text-decoration: none;
    }

if you want a third color, for after a link is visited, define that with a:visited. Is that what you're after?