Why is my <h1> tag not responding well in my css-CodePudding

Basically this is the code.

css

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background: url(smoky.jpg) no-repeat;
background-size:cover;
}

.login-box{
  width:280px;
  position:absolute;
  top:50%;
  left:50%;
  transform :translate(-50%,-50%);
  color:white;  
}
 .login-box h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;

}

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Transparent Login Form</title>
    <link rel="stylesheet" href="style2.css">

  </head>
  <body>

    <div >
      <h1>Login</h1>

      <div >
        <input type="text" placeholder="Username" name="" value="">
      </div>

<div >

<input type="password" placeholder="Password" name="" value="">

</div>

<input  type="button" name="" value="Sign in">

</div>

  


  </body>
</html>

Any ideas why the h1 is not accepting css.

I do not understand why float is used here. Isn't it just for aligning pictures with text

link to video that I am learning this from.https://www.youtube.com/watch?v=ooc6f1w6Mzg&t=54s

CodePudding user response：

CSS is working , if not work in your browser please reload or restart the server -

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(smoky.jpg) no-repeat;
  background-size: cover;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
h1 {
  float: left;
  font-size: 40px;
  color: red;
  border-bottom: 6px solid;
}

CodePudding user response：

Use > for child elements in css.

For example.

.login-box > h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;
}

CodePudding user response：

Check this line, stylesheet is properly linked

link rel="stylesheet" href="style2.css"

CodePudding user response：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(smoky.jpg) no-repeat;
  background-size: cover;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
}
.login-box > h1 {
  float: left;
  font-size: 40px;
  border-bottom: 6px solid;
  color: brown;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <div >
      <h1>Login</h1>

      <div >
        <input type="text" placeholder="Username" name="" value="">
      </div>

      <div >

      <input type="password" placeholder="Password" name="" value="">

      </div>

      <input  type="button" name="" value="Sign in">

      </div>
  </body>
</html>

CodePudding user response：

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background: url(smoky.jpg) no-repeat;
background-size:cover;
}

.login-box{
  width:280px;
  position:absolute;
  top:50%;
  left:50%;
  transform :translate(-50%,-50%);
  color:white;  
}
 .login-box ,h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;

}

hello sir here we should use the coma "," for the middle of login-box and the h1 tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <div >
      <h1>Login</h1>

      <div >
        <input type="text" placeholder="Username" name="" value="">
      </div>

      <div >

      <input type="password" placeholder="Password" name="" value="">

      </div>

      <input  type="button" name="" value="Sign in">

      </div>
  </body>
</html>