Change style inline to css - html

Question

I have these form with style inline, but I can't use it in css because it changes all my code when I reference css in another views:
<style>
body {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
}
.form-login {
background-color: #EDEDED;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border-color:#d2d2d2;
border-width: 5px;
box-shadow:0 1px 0 #cfcfcf;
opacity: 0.8;
}
h4 {
border:0 solid #fff;
border-bottom-width:1px;
padding-bottom:10px;
text-align: center;
}
.form-control {
border-radius: 10px;
}
.wrapper {
text-align: center;
}
</style>
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="container" style="margin-top:40px">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="panel panel-default form-login">
<div class="panel-heading">
<strong> Press to continue</strong>
</div>
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>
<div class="row">
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control has-success", #autofocus = "autofocus", placeholder = "Usuario", required = "required" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
#Html.TextBoxFor(m => m.Password, new { #class = "form-control has-success", placeholder = "Password", type = "password", required = "required" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</div>
<p>#Html.ActionLink("Return to home page", "Index", "Home")</p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
I think the problem is if I send body class to css it changes on all pages I reference css, how can I change to only change in this view? Regards

Answer 1

Instead of changing in file, you may add style in page through tag or give inline style with style element if you need change only at one place.
But adding inline style should be avoided.
Better to differentiate your element with a id and give properties to it

Answer 2

In that case you can save above inline CSS into separate CSS file and import that css file to that HTML page where you want this CSS.

Answer 3

Add the background to container, or add another class to the container and apply the style. and change margin-top to padding-top
.container {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
height: 100vh;
padding-top:40px;
}

Answer 4

you can create a CSS file with the styles you mentioned in your view and import that file only in this view which will solve your problem.