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:

.forgot-password adds some space above the "Forgot Password?" link.
.forgot-password a styles the link.
font-size: 14px; makes the link text smaller.
color: #007bff; gives the link a blue color.
text-decoration: none; removes the underline from the link.

To explore more about CSS styling techniques, click on the link: https://www.w3schools.com/w3css/defaulT.asp

Tutorials Details

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

October 18, 2024

Categories

Recent post

November 7, 2024

November 7, 2024

November 6, 2024

November 4, 2024

Get In Touch

Quick Links

Explore More

Recent post

Blog

Home / Tutorials

Tutorials Details

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

October 18, 2024

Categories

Recent post

November 7, 2024

November 7, 2024

November 6, 2024

November 4, 2024

Get In Touch

Quick Links

Explore More

Recent post