Name
Muhammad Waseem
Roll No:
008
Class
COMP-336
Dated
06-05-2026
Department
BS Computer Science
Section
A
Subject
Web Technologies
Submitted to:
Sir Muhammad Ahmed Hanif
1|P age
To maintain a professional workflow, External CSS is usually preferred for large projects, but
Internal CSS (using the <style> tag) is excellent for learning and single-page prototypes.
The Box Model & Layout
Before adding colors, you must control the space. Understanding the Box Model is the
foundation of all CSS layouts.
Padding: Space inside the container (between the text and the border).
Margin: Space outside the container (distance from other elements).
Flexbox: The modern way to center your form perfectly on the screen using display:
flex.
2. Professional Implementation
Here is how you can apply the CSS categories (Color, Font, Box Model, and Effects) to a login
structure.
/* General Page Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* The Login Container */
.login-card {
background-color: #ffffff;
2|P age
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Visual Effect */
width: 350px;
text-align: center;
}
/* Form Elements */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* Ensures padding doesn't affect width */
transition: border-color 0.3s; /* Smooth Focus Effect */
}
input:focus {
border-color: #007bff;
outline: none;
}
/* Button Styling & Hover Effects */button {
3|P age
background-color: #007bff;
color: white;
padding: 12px;
width: 100%;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #0056b3; /* Darker shade on hover */
}
/* Links */
a{
color: #007bff;
text-decoration: none;
font-size: 14px;
}
a:hover {
text-decoration: underline;
}
Key Concepts to Remember
4|P age
Visual Hierarchy
Use Font Weight and Size to guide the user. Your "Login" header should be bold and large,
while the "Forgot Password" link should be smaller and subtler. This creates a logical flow for
the eyes.
The "Focus" State
For user experience (UX), it is vital to style the: focus state of input fields. This provides a visual
cue to the user, letting them know exactly which field they are currently typing in.
Hover States
Interactive elements like buttons and links should always change appearance slightly when
hovered over. This signals "clickability." Common changes include:
Slightly darkening the background color.
Adding a subtle shadow.
Changing the cursor to a pointer.
Centering Everything
To get your login box exactly in the middle of the browser window, use these three lines on the
parent container (usually the body):
1. display: flex;
2. justify-content: center; (Horizontal centering)
3. align-items: center; (Vertical centering
5|P age
6|P age
0
