Styling the Inputs

You now have your basic form elements in place. They look a little tiresome, however, so let's liven them up by defining a CSS rule for them. Do this by using the Tag definition and then create a class for the Submit button.

• View the movie: Styling the Inputs

Alternatively, you can complete the following steps:

1. Click the New CSS Rule button.
2. Select the Tag radio button option from the Selector Type options.
3. Select the input option from the Tag pop-up menu.
4. Click OK. The CSS Rule Definition for input opens.
5. Select the Background category, click the Background color picker, and choose #FFFF999.
6. Select the Border category and leave the Same For All options selected.
7. Select Solid from the Style pop-up menu.
8. Type 1 in the Width pop-up menu.
9. Click the Color color picker and select #666666. Click OK.
10. Click the New CSS Style button to open the New CSS Rule dialog box.
11. Select the Class radio button from the Selector Type options.
12. Type .button in the Name pop-up menu. Click OK.
13. Select the Background category, click the Background color picker, and choose #003333.
14. Select the Type category, click the Color color picker and choose #FFFFFF.
15. Select the Border category and leave the Same For All options selected.
16. Select Solid from the Style pop-up menu and type 1 in the Width pop-up menu.
17. Click the Color color picker and select #006699. Click OK.
18. Click the Submit button in Design view.
19. Right-click the tag in the Tag selector.
20. From the context menu, select Set class.
21. Select the button class and save your work.

Now that you have completed the styling of your form elements and added the form navigation, open your page in the browser and run through the tab navigation. You will see the Access Key navigation more clearly in Firefox than in Internet Explorer.

I'm sure you remember how you set the pseudo focus selectors in Part 1 of this series. Create a new one now that will affect the inputs when they receive focus. I've included the completed version in the download file. (See if you can remember how you completed that without checking back to Part 1.)

Where to Go from Here

In this series you saw how to create accessible web forms using CSS and Dreamweaver 8. You styled various types of form elements by using the Tag selector and you created and set class selectors when necessary. You also learned how to emulate table-style form layouts with CSS and created form layouts that consist of more than one column.

I hope you found this series worthwhile and that you can take some of the things you learned and apply them to your own web design work. For more information about CSS, visit the CSS Topic Center.

Page 4 of 4

Previous Page