Web Forms - Using label

Figure 5-11. Our example form with styled

Why do I like this better? Let’s say that aside from labels, the form has additional instructions or text that is also contained within <p> tags. This additional text would inherit the same styles if we applied them to <p> tags within our form.

We could instead apply a generic style to all text within our form, and then use the label styling specifically for customizing form controls uniquely.

The CSS would go something like this:

#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}

#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}

No need to be redundant

You’ll notice that we don’t have to repeat the font-size: 12px; rule in the #thisform label declaration. Since elements are contained within #thisform, they will inherit that property. It’s always good practice to set shared rules at a high level, then override only those that are unique and necessary further down the element tree. This will save bytes of code, which, besides being a good thing, also makes for easier updates later on. If you wish to change the font-family for the entire form, you need only update one rule, rather than each place that the rule is repeated.

Imagine you’ve built an entire site that uses the Georgia font face exclusively. You’ve added the identical rule, font-face: Georgia, serif;, to 20 different CSS declarations. Your boss comes to you a week later and says, “The CEO hates serif fonts now. Change the site to Verdana.” Now you have to dig through all 20 rules and make your updates.

Alternatively, you could set the rule at a high level, say the element—once. The entire document would inherit the Georgia font face, unless otherwise specified. Now, when your boss asks you to make the change, you can say, “No problem, it’ll be done in 2 minutes.” Or, you could keep the simplicity to yourself, tell him it’ll take you 2 hours, and then spend the extra time bidding on eBay items.

OK, of course, you should tell your boss the truth—they should know how valuable you are, saving their company time and code with your newly found solutions.

This chapter is from Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today. Buy this book now.