How to Create a Simple Login Page Using HTML and CSS

Introduction

 
HTML stands for HyperText Markup Language. This is the most important markup language that can be used to create a webpage. It is used to display text, image, audio, and video in a webpage.
 
CSS stands for Cascading Style Sheets. It is used to style HTML documents. CSS can make responsive web pages and is used for styling and its collection of formatting rules. It is used for designing purposes. The CSS extension is (.CSS).
 
There are three types of CSS:
  • Inline CSS
  • Internal CSS
  • External CSS
Step 1
 
Create a new folder and give a name to the folder. In the folder save an HTML and CSS file. After creating the folders, open the sublime text editor.
 
How To Create A Simple Login Page Using HTML And CSS
 
Step 2
 
Click File, Select New File, and Click Save. Give the file the name “index.html”.
 
How To Create A Simple Login Page Using HTML And CSS
 
Step 3
 
Next, click File, then New File, and click Save. Give the file the name “style.css”
 
How To Create A Simple Login Page Using HTML And CSS
 
Step 4
 
Now, link the HTML and CSS to the HTML file you just copied and paste this code in the heading tag:
  1.  <head>  
  2.    <link rel="stylesheet" type="text/css" href="css/style.css"/>  
  3. </head>  
Step 5
 
Next, create a structure for the login page using HTML, Username and Password.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>Login Form</title>    
  5.     <link rel="stylesheet" type="text/css" href="css/style.css">    
  6. </head>    
  7. <body>    
  8.     <h2>Login Page</h2><br>    
  9.     <div class="login">    
  10.     <form id="login" method="get" action="login.php">    
  11.         <label><b>User Name     
  12.         </b>    
  13.         </label>    
  14.         <input type="text" name="Uname" id="Uname" placeholder="Username">    
  15.         <br><br>    
  16.         <label><b>Password     
  17.         </b>    
  18.         </label>    
  19.         <input type="Password" name="Pass" id="Pass" placeholder="Password">    
  20.         <br><br>    
  21.         <input type="button" name="log" id="log" value="Log In Here">       
  22.         <br><br>    
  23.         <input type="checkbox" id="check">    
  24.         <span>Remember me</span>    
  25.         <br><br>    
  26.         Forgot <a href="#">Password</a>    
  27.     </form>     
  28. </div>    
  29. </body>    
  30. </html>     
Step 6
 
Next, write code in CSS to apply some style to the HTML so you can change the look of the login page.
  1. body  
  2. {  
  3.     margin0;  
  4.     padding0;  
  5.     background-color:#6abadeba;  
  6.     font-family'Arial';  
  7. }  
  8. .login{  
  9.         width382px;  
  10.         overflowhidden;  
  11.         marginauto;  
  12.         margin20 0 0 450px;  
  13.         padding80px;  
  14.         background#23463f;  
  15.         border-radius: 15px ;  
  16.           
  17. }  
  18. h2{  
  19.     text-aligncenter;  
  20.     color#277582;  
  21.     padding20px;  
  22. }  
  23. label{  
  24.     color#08ffd1;  
  25.     font-size17px;  
  26. }  
  27. #Uname{  
  28.     width300px;  
  29.     height30px;  
  30.     bordernone;  
  31.     border-radius: 3px;  
  32.     padding-left8px;  
  33. }  
  34. #Pass{  
  35.     width300px;  
  36.     height30px;  
  37.     bordernone;  
  38.     border-radius: 3px;  
  39.     padding-left8px;  
  40.       
  41. }  
  42. #log{  
  43.     width300px;  
  44.     height30px;  
  45.     bordernone;  
  46.     border-radius: 17px;  
  47.     padding-left7px;  
  48.     colorblue;  
  49.   
  50.   
  51. }  
  52. span{  
  53.     colorwhite;  
  54.     font-size17px;  
  55. }  
  56. a{  
  57.     floatright;  
  58.     background-color: grey;  
  59. }  
Step 7
 
Before using CSS code, the output looked like this:
 
How To Create A Simple Login Page Using HTML And CSS
 
After using the CSS code, the output looks like this:
 
How To Create A Simple Login Page Using HTML And CSS
 

Summary

 
We have successfully created a Login page. I hope this article is useful to you. If you have any comments in this article, please ask in the comment section.