CSS

Login Form

Lets have a look at how to make a simple clean login form in CSS, in this tutorial we will only be focusing on the styling of the form and page not the server sided programming to it. If your using internet explorer you will need a doc type

So start by adding this HTML

and add the CSS rules for this

body
{
background-color: #eaeaea;
}
#wrapper
{
width: 560px;
height: 160px;
background-color: #f6f6f6;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border: 1px solid #dadada;
padding: 20px;
color: #444444;
}

Now we have our basic layout shape its time to add some content inside of it.

to do this lets add a heading like this and some filler text

<h1>Login Form</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida ante sed nulla interdum id ultricies mauris posuere. Aenean auctor lacinia tellus a elementum.

and lets style the heading like so

h1
{
padding: 0px;
margin: 0px;
font-size: 14pt;
color: #287fe2;
font-family: arial;
}

you should have something like this

demo1

now lets add in the actual login form so add the following HTML

<form action="#" method="post">
<table>
<tr><td>Email Adress</td><td><input type="text" id="textBox" /></td><td rowspan="2"><input value="Login" type="submit" id="button" /></tr>
<tr><td>Password</td><td><input type="password" id="textBox" /></td><td></td></tr>
</table>
</form>

Now we need to style this form so lets use this CSS

form
{
margin-top: 20px;
}
#button
{
margin-left: 5px;
width: 50px;
height: 65px;
}
#textBox
{
width:300px;
height: 25px;
}
#button,#textBox
{
border: 1px solid #dddddd;
color: #444444;
background-color: #f2f2f2;
}

and that is all there is to it.