Adding css to the header section

HTML & CSS
1

Hi, i need help with the refistration form i want to add a a style tag into the header section e.g <style type="text/css">
and colour background
<style type="text/css">
.signup{background-color: #222535; border-color: #DD8705;}
i have tried it but i didnt get it might help if it had body color and corder color to the rfegistration form…it would help if the form would right align

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.signup{background-color: #222535; border-color: #DD8705;}
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap 101 Template</title>
 <!-- Bootstrap -->
 <link href="CSS/bootstrap.min.CSS" rel="stylesheet">
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
</head>
</STYLE>
<body>
 <h1>
</h1>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
</body>
</html>
<div class="container">
   <div class="row">
     <div class="col-md-6">
     </div>
   </div>
</div>
<div class="container">
 <div class="row">
 <div class="col-md-6">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4 class="panel-title">
              SIGN-UP</h4>
      </div>
<form class="form-horizontal">
  <div class="form-group">
     <label for="inputfirstname" class="col-md-4 control-label">
       First Name</label>
     <div class="col-md-8">
          <input type="text" class="form-control" id="inputfirstname" placeholder="Enter First Name..." />
     </div>
  </div>
</form>
<div class="form-group">
    <label for="inputlastname" class="col-md-4 control-label">
     Last Name</label>
    <div class="col-md-8">
       <input type="text" class="form-control" id="inputlastname" placeholder="Enter Last Name..." />
    </div>
</div>
<div class="form-group">
    <label for="inputscreenname" class="col-md-4 control-label">
      Screen Name</label>
    <div class="col-md-8">
         <input type="text" class="form-control" id="inputscreenname" placeholder="Enter Screen Name..." />
    </div>
</div>
<div class="form-group">
    <label for="inputdateofbirth" class="col-md-4 control-label"> Date of Birth</label>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5">
<select class="form-control" name="">
             <option value="">January</option>
             <option value="">February</option>
             <option value="">March</option>
             <option value="">April</option>
             <option selected value="">May</option>
          </select>
        </div>
        <div class="col-md-3">
            <select name="" class="form-control">
                 <option value="">1</option>
                 <option value="">2</option>
                 <option value="">3</option>
                 <option value="">4</option>
                 <option selected value="">5</option>
             </select>
        </div>
        <div class="col-md-4">
            <select name="" class="form-control">
                <option value="">1980</option>
                <option value="">1981</option>
                <option value="">1982</option>
                <option value="">1983</option>
                <option value="">1984</option>
                <option selected value="">1985</option>
            </select>
        </div>
     </div>
   </div>
 </div>
<div class="form-group">
     <label for="inputgender" class="col-md-4">
        Gender</label>
     <div class="col-md-8 ">
       <label>
          <input type="radio" name="gender">
             Male
          </label>
       <label>
          <input type="radio" name="gender">
          Female
       </label>
     </div>
 </div>
<div class="form-group">
     <label for="inputUsername" class="col-md-4">
          Country</label>
      <div class="col-md-8">
          <select name="" class="form-control">
              <option value="">Australia</option>
              <option value="">Canada</option>
              <option value="">United Kingdom</option>
              <option selected value="">USA</option>
          </select>
      </div>
 </div>
<div class="form-group">
     <label for="inputemail" class="col-md-4">
        E-mail</label>
     <div class="col-md-8">
          <input type="text" class="form-control" id="inputemail" placeholder="Enter E-mail......"></input>
     </div>
</div>
<div class="form-group">
     <label for="inputphone" class="col-md-4">
         Phone</label>
     <div class="col-md-8">
       <input type="text" class="form-control" id="inputphone" placeholder="Enter Phone......"></input>
     </div>
</div>
<div class="form-group">
     <label for="inputpassword" class="col-md-4">
        Password</label>
     <div class="col-md-8">
        <input type="password" name="" class="form-control" value="">
     </div>
</div>
<div class="form-group">
     <label for="inputconfirmpassword" class="col-md-4">
       Confirm Password</label>
     <div class="col-md-8">
         <input type="password" name="" class="form-control" value="">
     </div>
</div>
<div class="col-md-8">
        <div class="checkbox">
          <label>
             I agree to the Terms of Use
             <input type="checkbox">
          </label>
        </div>
    </div>
 </div>
      <div class="panel-body">
             
      </div>
      <div class="panel-footer">
          <div class="form-group">
     <div class="col-md-8">
         <input type="submit" name="submit" value="submit" class="btn btn-default"= “btn-success” class>
     </div>
<div class="form-group">
     <div class="col-md-8">
                  <input type="submit" name="CANCEL" value="CANCEL" class="btn btn-default" “btn-primary” class>

     </div>
 </div>
 </div></div>
   </div>
 </div>
 </div>
 </div>
2

Welcome to the forums, @haroldkolawole. If you want your code to show up properly, you need to format it. The easiest way is to type three backticks () on the line just before the code, and three backticks on the line after the code. Or alternatively, you could just highlight your code and select the </>` icon that is just above the edit area. I formatted your code this time, because the html part was not showing up, but try to remember to do this next time. :slight_smile:

3

Your css targets the class called “signup”, but I don’t see any element with that class in the html.

4

Also noticed that the closing </style> tag is after the closing </head> tag. This is invalid code, the style should close immediately after the css.
You also don’t need to state the type in the style tag.

Edit: There are even more validation errors.
I think you need to use this:-

1 Like
5

Hey is there any reason you are using bootstrap for this?

I understand bootstrap helps with content flow but as far as I see there is no other content on the page?

also what do you mean by “content align right” are you saying you want entire form to be on the right side of the page or do you mean you want the text to align on the right side of the form?

If responsive design is an issue than my usual solution is wrapping the whole form into one tag and move them around when the screen shrinks I don’t think my 2 cent comment is helping sorry if I am arguing with your reason to use bootstrap :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.