CSS: The Missing Manual

Tutorial: Styling a Form

This tutorial gives you some practice using CSS to organize a form and make it more attractive. If you open chapter_10 → form → form.html in a Web browser, then you'll see it contains a simple form for subscribing to CosmoFarmer.com (Figure 10-11). The form asks several questions and uses a variety of form elements for input, including text boxes, radio buttons, and pull-down menus.

As subscription forms go, it looks fine, but a little bland. In the steps on the following pages, you'll CosmoFarmer-ize the fonts, line up the questions and boxes better, and add a few other improvements.

1. Open the file form.html in a text editor.

   There's already an external style sheet attached to this page, but you'll add your new styles to an internal style sheet. Start by bringing down the size of the type in the form.

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

   

   Figure 10-11. HTML's <table> tag is a common way to organize the questions of a form. But you can also use CSS (and a lot less HTML) to make the form's layout clearer and more attractive.

   Time to work on the layout. To better align the form elements, you'll create the appearance of two columns, one for the questions (labels) ...