CODEWITHSUNDEEP
htmlcss
Brian
Brian

Reputation: 99

Why h1 tag not responding well in my CSS?

Basically this is the code.

css

*{
    margin:0;
    padding:0;
    font-family:sans-serif;
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 class="login-box">
      <h1>Login</h1>

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

<div class="textbox">

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

</div>

<input class="btn" 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

Upvotes: 0

Views: 97

Answers (4)

al mahfuz
al mahfuz

Reputation: 13

CSS is working , if it doesn't 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;
    }

Upvotes: 1

vignesh K H M
vignesh K H M

Reputation: 1

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 class="login-box">
      <h1>Login</h1>

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

      <div class="textbox">

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

      </div>

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

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

Upvotes: 0

MN A
MN A

Reputation: 49

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 class="login-box">
      <h1>Login</h1>

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

      <div class="textbox">

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

      </div>

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

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

Upvotes: 0

ahmed moeed
ahmed moeed

Reputation: 183

Check this line, stylesheet is properly linked

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

Upvotes: 0

Related Questions