How to Apply Styles with Html Helpers in MVC4 Razor
In this article let us discuss how to apply CSS styles using HTML helpers.
- using Inline
- using Class
Using Inline CSS
From the below code, we can directly add the styles.
@Html.TextBox(“Name”, “”, new{style = “width:80px;height:20px;background-color:#F0F0F0 ;”})
using CSS Class
Another way, we can call the css class name instead of style.
.txtbox {
width: 100px;
height: 75px;
background-color: #F0F0F0;
border:1px solid black;
}@Html.TextBox(“txtName”,””, new{@class = “txtbox”})
Note :
Correct Way:
@Html.TextBox(“txtName”,””, new{@class = “txtbox”})
Wrong Way:
@Html.TextBox(“txtName”, new{@class = “txtbox”}) – It will not apply the style to the textbox
From the above code new{@class = “txtbox”} want to be third parameter , if you not going to pass the value as second parameter then we need pass null/Empty value.
Output:
