Hello everyone. In today’s lesson, I will guide you step by step through the creation of this nicely-styled CSS/HTML Login Form :
Create a new .html document. Name it login.html.
Copy the code and insert it into your new created document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login Form</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="login.php">
<div class="paragraph">
<p>Insert your credentials</p>
</div>
<input type="text" name="username" size="15"/>
<label for text>Username</label> <br/>
<input type="text" name="password" size="15"/>
<label for password>Password</label><br/>
<input type="submit" class="submit" value="Login" />
</form>
</body>
</html>
This is how your page looks like now:
Pretty comun,huh?
Let’s add a bit of style. Create a new file in the same folder and name it styles.css
Align the form:
body
{
margin:50px 0px;
padding:0px;
text-align:center;
}
Now stylize the form
form
{
width:250px;
height:200px;
margin:0px auto;
text-align:left;
padding:15px;
border-radius:25px;
border: 0px;
background: #C9C9C9;
background: -webkit-linear-gradient(top, #eee 0%,#C9C9C9 100%);
background: -moz-linear-gradient(top, #eee 0%,#C9C9C9 100%);
background: -o-linear-gradient(top, #eee 0%,#C9C9C9 100%);
background: -ms-linear-gradient(top, #eee 0%,#C9C9C9 100%);
background: linear-gradient(top, #eee 0%,#C9C9C9 100%);
}
Stylize the rest of the form elements:
input
{
height:25px;
border:#005481;
margin:10px;
margin-top:13px;
}
label
{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color:#005481;
}
.submit
{
background-color:#005481;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color:#FFF;
width:120px;
height:30px;
border-radius:5px;
}
Add style to the first paragraph:
.paragraph
{
padding-left:10px;
padding-bottom:3px;
border-bottom:1px #005481 dotted;
margin:0px;
}
p
{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color:#005481;
}
Great. Your form is done. If you have any questions, don’t hesitate to ask.
