Formatting Forms with CSS

To format a form a bit through CSS, click the “New CSS Rule” button.
If you still do not know where you can find it again, start with lesson 1.

This opens the “New CSS Rule” dialog.
I choose the type “Class”, I give the rule a name and Dreamweaver can define it in the existing style “mystyle.css”.
Click the OK button.

In the “CSS Rule Definition for …”, you can change whatever you want.
In this example I change the font and font height in the “Type” category, the background color in the “Background”. And in the “Border” category, I change the style, width and color.
But it’s not a must, you can do what you want.
Click the OK button when you’re done.

Because we have chosen the selector type “Class”, we need to now apply them to every field in our form.
First select the field in the form.
Click the downward pointing arrow next to the “Class” box in the properties window and select “textfield” in the drop-down menu. This is because of the line that we just created.
Repeat for each field.

The result in the Browser:

Please note that not all browser will display the form with the same layout.
But because 95% of people still surf with Bill’s Browser when you hold an account with Internet Explorer, but you still have a long way to go in the right direction.

For professional designers, this is obviously not enough, they should ensure that their design looks fine in any browser.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats