CSS TUTORIAL 11 – STYLING A FORM
This exercise gives you some practice using CSS to organize a form and make it more attractive.
Using your HTML editor open the file form/form.html.
The page contains a simple form for subscribing to CosmoFarmer.com. The form asks several questions and uses a variety of form elements for input, including text boxes, radio buttons and pull-down menus. You will change the fonts, line up the questions and boxes better and add a few other improvements.
There's already an external style sheet attached to this page, but you will add your new styles to an internal style sheet. Start by reducing the size of the type in the form.
Click between the opening and closing <style> tags, and then add the following style:
#subForm {
font-size: .8em;
}
The subscription form has an ID of subForm applied to it so this style sets the text size for all text between the <form> tags.
To better align the form elements, you will create the appearance of two columns - one for the questions (labels) and another for the answers (form fields).
Add another style to the internal style sheet:
#subForm .label {
float: left;
width: 230px;
}
This descendent selector identifies any element with a class of .label within this form. The style sets a width of 230 pixels and floats the element to the left. Remember the float property lets you move elements to one side or the other of a containing block. It has the added benefit of letting you set a width and force elements that follow the style to wrap around it. As a result, when you apply this style to each of the questions in the form, you create an even-width column. But in order to see the effect, you must first apply the class to the appropriate page elements.
In the page's HTML, locate this code <label for="name"> and add class="label", so the tag looks like this:
<label for="name" class="label">
You must do the same for each question in the form.
Repeat the steps for the following pieces of HTML code: <label for="email">, <labelfor="refer">, <label for="comments">.
There is one additional question on the form"Rate your apartment farming skills". It isnot inside a label tag, since its purpose is to introduce a series of radio buttons, each of which has its own label. You need to add a <span> tag to this text so you can apply the label style to it.
Find the text Rate your apartment farming skills, and then wrap it in a <span> tag with a class of label:
<span class="label">Rate your apartment farming skills</span>
Now the questions appear to be in a single column. They would look better if they stood out more and lined up with the corresponding form fields.
Edit the #subForm .label style you created earlier, so it looks like this:
#subForm .label {
float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
}
Preview the page in a web browser.
There is one last step for these labels. Because they are floated to the left, if the text runs more than one line, the question that follows will also try to wrap around to the right. You can fix that by applying the clear property.
Add a clear property to the #subForm .label style:
#subForm .label {
float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
The form is shaping up, but that Subscribe button looks out of place over at the left edge. You will align it with the other form elements next.
Add another style to the internal style sheet.
input#subscribe {
margin-left: 240px;
}
The <input> tag that creates this Subscribe button has an ID of subscribe already applied to it, so this style indents the button 240 pixels to match the width and right margin of the #subForm .label style.
Most browsers let you style buttons in other ways.
Edit the Subscribe button style by adding a background colour and font to the style you just created:
input#subscribe {
margin-left: 240px;
background-color: #CBD893;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}
You can even change the font used in a pull-down menu.
Add a style for the form's select menu:
select#refer {
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}
You are now going to improve the form fields. Begin by changing their font and background colours.
Create a new group selector for styling the three text boxes in the form:
input#name, input#email, textarea#comments {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
}
This style gives the text boxes a light yellow background colour and sets a new size and font for text visitors to type into them. The boxes look a little narrow, and they also appear a little low compared to their labels at right.
Edit the style you just created by setting a width, and altering the top margin:
input#name, input#email, textarea#comments {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: -2px;
}
You can make your form easier for your visitors to fill out by highlighting the active form element with the special :focus pseudo-class. You will add that in the next step.
At the end of the internal style sheet, add one last style for the pull-down menu and the three text fields:
input#name:focus,input#email:focus,textarea#comments:focus,select#refer:focus{
background-color: #FDD041;
}
The :focus pseudo-class works only in Internet Explorer 8, Firefox, Safari and Opera, but since it doesn't do IE6 and 7users any harm, adding a :focus style is a useful enhancement.
View your completed page in Internet Explorer and other browsers.
A - CSS Tutorial 11 - Styling a FormVersion 1
Page 1 of 7