Formatting Forms

You can use CSS styles (covered in Lesson 4) to make forms more consistent with the look and feel of your site.

1.	Place the insertion point in the legend Contact Information in the first fieldset. In the tag selector, select the <fieldset> tag. Click the New CSS Rule button on the CSS Styles panel. For the Selector Type, choose Tag. Use the menu to the right of the Tag text field to select fieldset if it is not already displayed in the text field. In the Define In section, choose This Document Only and then click OK. The CSS Rule definition for fieldset dialog box opens. You can create a style for the fieldset to control the look of the outlines surrounding individual sections of the form.
2.	Select Box from the category list. In the Padding section, type 5 into the Top text field and leave the Same For All box checked. The padding gives the form objects some space so that they are not right up against the fieldset outline.
3.	Select Border from the category list. In the Style section, select solid from the Top menu and leave the Same for all box checked. In the Width section, type 1 into the Top text field, make sure that Pixels is selected, and leave the Same for all box checked. In the Color section, type #CCCC99 into the Top text field and leave the Same for all box checked. Click OK. Each fieldset is now surrounded by a border.
4.	Click the New CSS Rule button on the CSS Styles panel. For the Selector Type, choose Tag. Use the menu to the right of the Tag text field to select H5 and choose This Document Only in the Define In area. In the CSS Rule definition dialog box, select the Type category, and set the color to #999999. Click OK. This style will be used for the legends that designate the different sections of the form.
5.	Select the legend text Contact Information. On the Property inspector, change the format to Heading 5. Style the legends for the other two fieldsets in the same way.

Tip

You can also just place the insertion point within the text and choose H5 from the Format menu on the Property inspector instead of selecting it because headings are applied to entire text blocks.

Your form now matches the feel of the rest of the colors and style used in the Yoga Sangha project site. You can save the file and preview it in the browser.