Styling a form with CSS

When creating web forms, developers tend to get tired of looking at the same dreary and dull form. Developers who are familiar with CSS are able to provide their visitors with a great looking interface by styling form fields. This will enhance visual appeal for your web page that is easy to achieve with a little bit of ingenuity and CSS.

In this article, we’ll examine how to style our form fields with CSS. Along the way, we’ll hit a few roads bumps and learn how to account for them. As a result, we’ll have a web form which looks great visually, works in all modern browsers and learn some cool CSS concepts and techniques.

If you would like to follow styling a form’s step-by-step development or try your hand at styling a form yourself, you’ll find the project file link helpful.

Finished Page

Printable Version
Word PDF
Download Project Files
Zip

Open the web form

For this article’s purpose, we’ll use an existing form and focus on styling form fields. You can find the file, styleform.html in the project file download. The file already has an external style sheet attached:

<head>
<meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1">
<link  href="style.css" rel="stylesheet" type="text/css"  media="screen">
</head>

Also, inside the opening form tag we have the following:

<form action=""  method="post" name="simple" id="simple">

Setting our form to an ID of simple allows us to style individual form fields. Continuing, inside the opening table tag we have the following:

<table cellspacing="0" id="simple">

Setting our table to an ID of simple allows us to style our table. Though the table is nested inside a form, we need to be specific in styling either our form or table, because we have fixes intended for one in most instances, but not the other. Before moving forward, open the style sheet, style.css in your text editor.

Set table width, margins and border

First, let’s set our table width, assign a margin and border:

table#simple{
 width:500px; 
 margin:0 auto; 
 border:0; 
 border-collapse:collapse;
    }

Property-values are as follows:

When you set an element to a fixed width, assigning left and right margins to auto will center our table in modern browsers. Setting border to collapse will collapse adjacent borders that would occur by setting a border on the td element. Save your file and preview the results.

Styling table

Moving content up

You will notice in our last three cells, the left cell is pushed down and out of alignment with the right cell. The reason is the right cell has more content than the left. We’ll assign a CSS rule to fix this. Add the following CSS:

table#simple td{ 
vertical-align:top;
}

We use a combined descendent selector to set all td tags in a table with an ID of simple. The following property-values are used:

This will push all table cells to the top of their cell. Save your file and preview the results.

Move content up

We'll continue with this article by styling our input tag next.

top of page

Thank you for visiting Fabrizio.com - Come back again soon.