Styling Forms with CSS

When using HTML forms we can alter their appearance using CSS in much the same way as we can alter any other HTML element. To change the appearance of our form we need to apply styling to the <form> tag using either an internal or external stylesheet or inline styling.

Using CSS we can alter many form properties including background color, border properties, and font properties. For example, take a look at the following form:

Full name

Address

Credit Card

CC Number

Shipping
Overnight
Standard
Economy

Options
Postal insurance
Gift wrapped

This is a typical credit card ordering form which includes all of the various HTML input types a text box, textarea, select list, password text input, radio buttons, checkboxes, and submit and reset buttons.

The first stage in styling our form is to set the general appearance of the <form> tag. For example, we might use the following CSS to change the background color and font properties of our form:

form {
	background-color: #99CCFF;
	font-family: "verdana", arial, sans-serif;
	color: navy;
}

This produces the following layout:

Full name

Address

Credit Card

CC Number

Shipping
Overnight
Standard
Economy

Options
Postal insurance
Gift wrapped

Much better don't you think? But this is only very basic form styling using CSS; we can also style our individual inputs, such as our text boxes and radio textareas, to give us even greater control over the appearance of our page. We'll see how to do this in the next section.