'trying to have a different color my login form

hi i have decided to face my fears of frontend development and I am having a little bit of trouble here so I am trying to put a 50 px which is a rough estimate around my login form and I wanna change the color of it so the back ground is #423075 but I want the back of the actual login section tobe #300C94 what is the best way todo this with my code

index.html

<html>
<header>
    <title>Login-1</title>

    <link rel="stylesheet" href="assets/css/styles.css" >


</header>

<body>


    
    <form class="form" >
              <div class="form-back" name="form-back" >
        <input  name="username" type="text" placeholder="username" required>
        <br>
        <input  name="password" type="password" placeholder="password" required>
        <br>
        <input  name="confirm_password" type="password" placeholder="Confirm Password" required>
        <br>
        <input  name="submit" type="submit">
</div>
    </form>


</body>

</html>

styles.css

body{

    margin-top: 300px;
    text-align: center;
    background-color: #423075;
    

}

form{
    display: inline-block;


}

div{
    
    border-radius: 10px;
     border-radius: 30px;
    background: #300C94;
}

input[type=submit] {
    width: 100%;  
     
}

any suggestions would be great

htmlcss


Solution 1:[1]

background-color: #300C94;

try to put every element which you differentiate in background or any of the CSS style put it in different division.`

<div></div>

then use the CSS

.div {background-color: #300C94;}

it will provide you the flexibility to change the color of different section you can also use the section html element which is also similar to div.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sarthak chauhan

Related Questions