Custom style CSS in MVC Forms

Question

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>

Answer 1

If you whish to make use of one or more css files you can do the following:

1. Add css to content folder
2. Define a bundle (do this and you get minification and bundling for free. More about that here)
3. Add it to your header in _layout.cshtml

Step 1:

Step 2 (App_Start/BundleConfig.cs):

bundles.Add(new StyleBundle("cssPathName").Include(new []
            {
                "~/Content/Css/Base/style.css"
            }
        ));

Step 3:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>

    </title>
    @Styles.Render("cssPathName")
</head>
<body>
</body>
</html>

Don't want to use bundling and minification?

Ignore step 2 and use this for step 3:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>

    </title>
    <link href="@Url.Content("~/Content/Css/Base/style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Inline class on for example an editorfor

@Html.EditorFor(model => model.RememberMe, new{@class="css-class-name"})