HTML and CSS Reference
In-Depth Information
You can see the change in Figure 11-7.
Figure 11-7.
The
legend
elements in our example form have been styled and positioned.
That helps a lot. But notice our styles for
fieldset
and
legend
were applied not only to
our three main
fieldset
elements, but also to the “Credit card”
fieldset
that is nested within
the “Payment option”
fieldset
. If we want to style that one separately, we could target it by its
id
attribute (which is
credit_card
, so we'd use a selector like
fieldset#credit_card
in CSS).
However, in this case it may be wiser to style any
fieldset
elements nested within a
fieldset
.
We only have one now, but if the form expands as we continue to develop our site, we'll be
able to kill more than one bird with the same stone.
fieldset fieldset {
background-color: #efefef;
margin: 1em 0;
}