Styling Forms - Pro CSS Techniques - page 245

fieldset fieldset legend {
font-size: 1.2em;
}
Here, we've adjusted the margin on nested fieldset elements, given them a different back-
ground color, and also made their labels a bit smaller (Figure 11-8).
Figure 11-8. By using the descendant selector fieldset fieldset , we are able to style fieldset
elements that are nested inside other fieldset s.
We've now created a good, basic form that is readable, accessible, and usable. But let's
keep taking this a bit further.
Intermediate Form Styling
Our current form takes up a lot of vertical space. Perhaps we can reduce its length by displaying
some of the label/form pairs on the same line. We can do this using CSS's float model. You may
have noticed a few <br /> tags in the (X)HTML for the form—we'll use them as the “clearing”
elements, creating line breaks in the right places.
Let's start by setting our input elements to a consistent width and floating the label
elements (which contain our input fields) to the left:
input {
width: 12em;
}
label {
float: left;
margin-right: 1em;
}
We've also given our label elements a small right margin in order to separate one field
from the next, as Figure 11-9 shows.