How to apply a long block of css to one whole div section (login form)

问题

I have a login form section that I have enclosed inside a div. I want this section of the page only to be styled by the css shown below. However, when I add the css in the style, it isn't applied. I think it is down to syntax. I am trying to add styles within styles.

<div class="login-form">
  <form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
        
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

The existing css is below (note there is bootstrap enabled and the bottom part of the css is relevant to another part of the site -the intro part and div)

It's in the first part

 .login-form {
    
    body {font-family: Arial, Helvetica, sans-serif;}

that I've tried to refer to the div class for the form I want styled.

<style>


.login-form {

body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

}

    
.intro-text {
  
  width: 1000px;
  padding:15px;
  margin:40;
}

Can someone point out the error with some best practices on applying several styles to one div. I have already applied styles correctly, as can be seen with the

intro-text {
      
      width: 1000px;
      padding:15px;
      margin:40;
    }

which is correctly applied to:

<div class="intro-text">
<h1 class="display-5">Login</h1>
     <p>Welcome back</p>    
</div>

I cannot figure out how to apply the more complex styles to just the login-form div class and have tried several things.

回答1:

The css you have is not valid. You cannot nest css blocks like that. I would recommend take a look at the css selectors.

Let's say you want to target a button inside the div with class login-form. Instead of doing this:

.login-form{
    button{
        //this doesn't work
    }
}

You should do this:

.login-form button{
    //css here
}

.login-form {
  font-family: Arial, Helvetica, sans-serif;
}
.login-form form {border: 3px solid #f1f1f1;}
  
.login-form input[type=text], .login-form input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
  
.login-form button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
  
.login-form button:hover {
  opacity: 0.8;
}
  
.login-form .cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}
  
.login-form .imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}
  
.login-form img.avatar {
  width: 40%;
  border-radius: 50%;
}
  
.login-form .container {
  padding: 16px;
}
  
.login-form span.psw {
  float: right;
  padding-top: 16px;
}
    
.intro-text {
  
  width: 1000px;
  padding:15px;
  margin:40;
}

Here is a snippet with the proper css:

<link rel="stylesheet" href="style.css">
<div class="login-form">
  <form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
        
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>
  </form>
</div>

回答2:

Syntax use is not correct , nesting in css shoud be in you case like

.login-form form {
   // css code here 
}

so apply selector and space and other selector for nesting properties so every css rules in your code to be applyed only to this page , should be preceded with parent selector (.login-form) in your case .

but for the body , it cant be applied by this way ,

to apply some font for only this page , you could use by example :

adding class to body in this page then apply css as :

<body class="login-page">

   // rest of html

</body>

and css should be :

body.login-page {font-family: Arial, Helvetica, sans-serif;}

Also I forget to mention that the syntax you used before, is like the scss syntax, but it should be precompiled to browser understandable css formt , thus you project should as modern web project to precompile scss to css .

来源：https://stackoverflow.com/questions/65619573/how-to-apply-a-long-block-of-css-to-one-whole-div-section-login-form

标签

html

css

bootstrap-4