Styling forms is quite easy and can make the page look a lot better. In this tutorial, I will show you how to style the input fields and create what is called a two-column form in which the left column consists of the label and the right column consists of the input fields.

First the CSS:

label
{
	font-weight:bold;
	float:left;
	width:100px;
}
input.text
{
	border:1px solid #000;
	font-size:12px;
}
input.submit
{
	vertical-align:top;
}

Explanation:

Notice that the labels are floated left and set to a width of 100px. This is what gives the form a uniform two column form.

I created classes called “text” and “submit” which are for text fields and the submit button respectively.

HTML:

<form>
<label>First Name:</label><input type="text" class="text" /><br />
<label>Last Name:</label><input type="text" class="text" /><br />
<label>User Name:</label><input type="text" class="text" /><br />
<input type="submit" class="submit" />
</form>

That’s it! Easy enough right?

Result: