A Beginner’s Guide To Styling CSS Forms

HTML Tags

class="site__container">
  <main class="hero__images">
	<main class="card__wrapper">
	<!-- background for the form -->
	    <section class="card__forms">

	    <!-- Wrapper for all items of the box -->
		  <section class="items__wrapper">

			<div class="site__logo">MS</div>
			 <div class="sign__caption">
				<p>Signin for home delivery service</p>
			 </div>

			 <div class="user_id">
			<!-- user id options for username and password -->
			   <input type="text" name="Username" placeholder="Username">
			   <input type="password" name="Password" placeholder="Password">
			</div>

			<div class="checkbox__wrapper">
			<!-- Input field for checkbox and forget password -->
			  <input type="checkbox" name="checkbox">
			  <label for="checkbox">stay signed in</label> 
			  <a href="#">Forget Password?</a>
			</div>

			<div class="btn__wrapper">
			<!-- Sign in button -->
				<button class="btn__signin">sign in</button>
			</div>

			<div class="signup__option">
			<!-- Sign up option for new users -->
			<p>Don't have an account yet? 
                    <a href="#">Sign Up!</a></p>
                  </div>
		         </section>
		   </section>
	     </main>
        </main>
      </div>
</body>