HTML and CSS Reference
In-Depth Information
This yields the result shown in Figure 11-5.
Figure 11-5.
Some very basic styles have been added to our example form.
OK! Already we're seeing a significant improvement. Now, let's turn our attention to the
input
elements and their
label
s.
In order to create a line break after each label/control pair, we can set the
label
elements
to
display: block;
. While we're at it, let's set the
font-weight
for labels to
bold
and put a bot-
tom margin on the input elements to make the form a bit more readable:
label {
display: block;
font-weight: bold;
}
input {
margin: 0 0 .5em 0;
}
Now we've got the display shown in Figure 11-6.
