CODEWITHSUNDEEP
htmlcssasp.net-mvc
user2693135
user2693135

Reputation: 1316

CSS styling in MVC to display different @Html.ActionLink links

In an MVC application, I need to display links rendered by @Html.ActionLink as buttons. I have the following code in site.css:

.linkbutton {
       font-family: Constantia, Georgia, serif;
       text-align:justify;
       padding-left: 22px;
       background-color:#FF7F00;  
       color:#fff;     
       border: 1px solid #333;
       cursor: pointer;
       font-size:1.2em;       
       width: auto;
       height:auto;        
}

In the view I used a table layout for the links and referred the linkbutton class as:

  <td class="linkbutton">
      @Html.ActionLink("Add Cab", "Create")
   </td>

The link is using the styles from the .linkbutton class. However, the text color that needs to be in white (#fff) is not inherited, despite being defined as color:#fff; in the CSS. Instead the default blue link color with an underline is getting displayed. I need the link to appear with white font color and without the underline.

In CSS I tried:

 a.linkbutton.link {
     /*Style code*/
 }

Then refer it from the view as:

 Html.ActionLink("Add Cab", "Create", new {@class = "linkbutton"}).

But, it is not working. Please help.

Upvotes: 1

Views: 4258

Answers (1)

Zabavsky
Zabavsky

Reputation: 13640

You can override the rules for links inside .linkbutton element, so instead of

a.linkbutton.link {
    /*Style code*/
}

write

.linkbutton a {
    color: #fff;
    text-decoration: none;
}

Upvotes: 1

Related Questions