Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

How to Create a Stylish Centered Login Form Using HTML and CSS

October 18, 2024

HTML File (login.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to create a stylish login form using HTML and CSS. Perfect for beginners!">
<meta name="keywords" content="HTML, CSS, Login Form, Beginner Tutorial, Web Design">
<meta name="author" content="Anuradha">
<title>Simple Stylish Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="login-container">
<h2>Login</h2>
<form action="#" method="POST">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-btn">Login</button>
</form>
<p class="forgot-password"><a href="#">Forgot Password?</a></p>
</div>

</body>
</html>

CSS File (styles.css):

/* Resetting default margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styling to center the form */
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f7f7f7;
}

/* Login Container */
.login-container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 320px;
text-align: center;
}

/* Login Heading */
.login-container h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}

/* Form Group for Labels and Input */
.form-group {
margin-bottom: 15px;
text-align: left;
}

.form-group label {
font-size: 14px;
color: #333;
}

.form-group input {
width: 100%;
padding: 10px;
margin-top: 5px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}

/* Login Button */
.login-btn {
background-color: #28a745;
color: white;
padding: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin-top: 10px;
}

.login-btn:hover {
background-color: #218838;
}

/* Forgot Password */
.forgot-password {
margin-top: 15px;
}

.forgot-password a {
font-size: 14px;
color: #007bff;
text-decoration: none;
}

.forgot-password a:hover {
color: #0056b3;
}

Explanation:

HTML File:

It includes two form input fields (username and password) and a submit button, organized using div elements with the class form-group for easy styling.
A "Forgot Password?" link is included for extra functionality.

CSS Breakdown:

Basic Reset:

The * is a universal selector. It applies to all HTML elements on the page.
margin: 0; removes all the default margins applied to elements (like space around elements).
padding: 0; removes the default padding inside elements.
box-sizing: border-box; ensures that padding and borders are included in the element's total width and height, making layout calculations easier.

Body Styling:

font-family: 'Arial', sans-serif; sets the font for the entire page. "Arial" is a clean, easy-to-read font. sans-serif means there are no extra lines or details at the end of each letter (compared to serif fonts like Times New Roman).
display: flex; enables Flexbox layout on the body, making it easy to center items. Flexbox is very useful for creating layouts without needing complex float or positioning rules.
justify-content: center; horizontally centers the form (the content of the body).
align-items: center; vertically centers the form.
height: 100vh; makes the body height 100% of the viewport height (i.e., the full height of the browser window).
background: #f7f7f7; sets a light grey background color to the body.

Login Container:

- .login-container is a class applied to the div that holds the form.
- background-color: #ffffff; sets the background of the container to white.
- padding: 20px; adds space inside the container between its content and its border, making it look more spaced out and readable.
- border-radius: 8px; rounds the corners of the box by 8 pixels, giving it a smooth, modern look.
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); adds a subtle shadow beneath the container. The shadow is offset slightly (by 4px vertically and 0px horizontally), and has a slight blur (8px) with a transparent black color (rgba(0, 0, 0, 0.1)), making the box look lifted off the background.
- width: 320px; limits the width of the form container, making it consistent across devices.
- text-align: center; centers any text inside the container (like the heading and the button).

Heading Styling:

.login-container h2 targets the h2 inside the login container.
margin-bottom: 20px; adds space below the heading to separate it from the rest of the content.
font-size: 24px; increases the size of the heading text.
color: #333; makes the heading a dark grey color, which is easier on the eyes than pure black.

Form Group Styling:

.form-group is applied to each group of the label and input fields.
margin-bottom: 15px; creates space between the groups, making the form look organized and readable.
text-align: left; aligns the label text to the left (so it's not centered like the rest of the text).

Label Styling:

.form-group label styles the label inside the form group.
font-size: 14px; sets the text size of the label to a smaller size (14px).
color: #333; makes the label text a dark grey.

Input Styling:

.form-group input styles the input fields (for both username and password).
width: 100%; makes the input take up the full width of the container.
padding: 10px; adds space inside the input field for a more comfortable typing experience.
margin-top: 5px; adds a small space between the label and the input.
font-size: 16px; makes the input text a little larger for better readability.
border: 1px solid #ddd; gives the input a light grey border.
border-radius: 4px; rounds the corners of the input slightly, matching the overall rounded look of the form.

Login Button:

.login-btn targets the submit button.
background-color: #28a745; gives the button a green background.
color: white; makes the text inside the button white for contrast.
padding: 12px; adds space inside the button, making it larger and more clickable.
border: none; removes the default border around the button.
border-radius: 4px; rounds the corners of the button to match the rest of the form.
cursor: pointer; changes the cursor to a pointer (hand icon) when hovering over the button.
font-size: 16px; makes the button text a bit larger.
width: 100%; makes the button stretch to the full width of the container.
margin-top: 10px; creates some space between the input field and the button.

Hover Effect:

.login-btn:hover changes the background color when the user hovers over the button. The slightly darker green (#218838) gives visual feedback that the button is clickable.

Forgot Password Link: