I make my first steps in ASP.NET MVC 4. I have little problems with style when made forms. Here below you can see what I have in my MVC project. It works fine but dont have any style.
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<p>Welcome!</p>
<legend><h2>Log in</h2></legend>
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.RememberMe)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.RememberMe)
</div>
<p>
<input type="submit" value="Enter"/>
</p>
</fieldset>
}
Here below you can see what I separately markup with traditional html. Every element here has there own style cause I used huge css file.
<div class="container">
<header>
<h1><strong>Welcome!</strong></h1>
<h2>Log in</h2>
</header>
<section class="main">
<form class="form-3">
<p class="clearfix">
<label for="login">Log in</label>
<input type="text" name="login" id="login" placeholder="Username">
</p>
<p class="clearfix">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Password">
</p>
<p class="clearfix">
<input type="checkbox" name="remember" id="remember">
<label for="remember">Запомнить</label>
</p>
<p class="clearfix">
<input type="submit" name="submit" value="Enter">
</p>
</form>
</section>
</div>
QUESTION: How correctly to apply the same style (css file) which I used in traditional html to my MVC project?
EDIT:
<div class="container">
<header>
<h1><strong>Welcome</strong></h1>
<h2>Log In</h2>
</header>
<section class="main">
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<form class="form-3">
<p class="clearfix">
<label for="login">Username</label>
<!--<input type="text" name="login" id="login" placeholder="Username">-->
@Html.EditorFor(model => model.UserName, new { id = "login", placeholder = "Username", type = "text", name = "login" })
@Html.ValidationMessageFor(model => model.UserName)
</p>
<p class="clearfix">
<label for="password">Password</label>
<!--<input type="password" name="password" id="password" placeholder="Password">-->
@Html.EditorFor(model => model.Password, new { id = "password", type = "password", name = "password", placeholder = "Password" })
@Html.ValidationMessageFor(model => model.Password)
</p>
<p class="clearfix">
<!--<input type="checkbox" name="remember" id="remember">-->
@Html.EditorFor(model => model.RememberMe, new { type = "checkbox", name = "remember", id = "remember" })
<label for="remember">Remember</label>
</p>
<p class="clearfix">
<input type="submit" name="submit" value="Enter">
</p>
</form>
}
</section>
</div>

new {@class="form-3"}you can apply like this as parameter of razor syntex.