Introduction
In this article, we will explore to how to apply Inline CSS and Styles with Html Helpers in MVC3 Razor. The CSS plays an important part in design. We often need to define CSS at control level using inline style or using style classes.In Razor syntax also we can apply style classes and inline style, but in different way.
- Simple Css class :
<style type="text/css">
.ClassNameHere
{
width: 100px;
height: 150px;
background-color: #F0F0F0;
border:1px solid black;
}
</style>
- Using CSS Class in Html Helpers :
Another way, we can call the css class name instead of style.
@Html.TextBox("FirstName",new{@class="ClassNameHere"})
@Html.TextBoxFor(model => model.FirstName,new{ @class="ClassNameHere"})
- Using Inline CSS in Html Helpers :
From the below code, we can directly add the styles attribute.
@Html.TextBox("FirstName", new { style="width:80px;height:20px;background-color:#F0F0F0 ;" })
@Html.TextBoxFor(model => model.FirstName, new { style="width:80px;height:20px;background-color:#F0F0F0 ;" })
Thanks for Reading and I Hope this tricks helps you.
