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:
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:
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.