Head First HTML with CSS

styling the form
Styling the form and the table with CSS
We just need to add a few styling rules to the XHTML, and we’ll be done.
Because this form is part of the Starbuzz site, we’re going to reuse the style in the
“starbuzz.css” style sheet, and create a new style sheet, “styledform.css”, to add
new style rules for the Bean Machine form. All of this CSS should be familiar to
you now. We’re not using any rules unique to tables or forms; it’s all just the same
stuff you’ve been using in the last few chapters.
You’ll find this CSS in the file “styledform.css” in the folder “chapter14/starbuzz”.
body {
background: #efe5d0 url(images/background.gif) top left;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 20px;
}
table {
border: thin dotted #7e7e7e;
padding: 10px;
}
th {
text-align: right;
vertical-align: top;
padding-right: 10px;
padding-top: 2px;
}
td {
vertical-align: top;
padding-bottom: 15px;
}
table table {
border: none;
padding: 0px;
}
table table td {
text-align: right;
padding-bottom: 0px;
}
630 Chapter 14
We’re going to rely on the Starbuzz CSS for some of our style,
but we’re changing the body font to a sans-serif font, adding the
Starbuzz background image, and adding a margin to the body.
We’re adding a border around the table,
and some padding between the table
content and the border.
These font properties
will be inherited by all
the elements on the page,
including the text in the
table and the form.
The form labels are in the table headings. We want to align
these to the top and right so they align nicely with the
form elements in the right column. We’re also adding a bit
of padding to give them a little bit more space.
The content of the data cells is already aligned
to the left by default, which is what we want,
but we have to align them vertically too, to
match the table headings. We’re adding a bit of
padding here too, to add space between the rows.
Ready Bake
CSS
These two rules override some of the other properties we set
in the rules for table and td above. Why? Because we don’t
want the nested table to have a border, and we want the
spacing to be tighter, so we’re removing the padding. We also
need to align the form labels in the nested data cells to the
right (those aren’t in table headings, like the others are, so
they’re not aligned with the th rule above).