Click to skip over navigation
 

lecture 9: styling

<< previous slide

return to lesson 9 index

next slide >>


White boxes and grey buttons are not necessarily the most visually-appealing combination, particularly not on a site with its own, distinctive visual style. It is quite straightforward to style forms, but for some reason it is rarely done. I wonder if this is to do with the preponderance of sites written using Dreamweaver or Front Page. In both of these packages, styling forms is quite a tortuous process, despite the fact that when hand-coding, it's quite straightforward. This is a classic case of where dependence on a generator can blind designers to some of the creative possibilities of HTML.

Fill in this form to join our mailing list

Name:

Sex:
Male
Female

Email address:

What topics are you interested in?

British Politics

World Politics

Political Theory

(Type something into the text boxes to see how the text colour and font have changed from the default.)

This isn't perfect, as you can see - radio and check boxes are still a bit awkward - but it's not bad, and it's also very easy. All I've done is created a "generic" style sheet class, with fairly straightforward properties:

.turquoise { background-color: #008b8b; color: #ffffff; font-family: "Lucida Sans Unicode", Arial, sans-serif; }

...and then included class="turquoise" in each of the <input> tags. Simple!

You can also use styles on the three form accessibility tags (see previous slide): <label>, <legend> and <fieldset>. All in all, you can get a reasonable amount of control over the appearance of your form, should this matter to you.