Head First HTML with CSS

The final test drive
You’re going to add two elements to the of
your XHTML in “styledform.html”, linking in the Starbuzz style
sheet from Chapter 12, “starbuzz.css”, and your new style sheet,
“styledform.css”. Make sure you get the order correct: link the
“starbuzz.css” file first, then the “styledform.css”. Once you’ve got the
two style sheets linked, save and reload your page. You should see the
snazzy, styled version of the Starbuzz Bean Machine in your browser.
Wow, what a difference a little style makes!
The labels are
aligned with the
top of the form
elements, and
they’re aligned
to the right as
well. This alignment
makes it easier to
see which labels
belong with which
controls.
The space between
the rows makes a
big difference and
makes the form
much easier to read.
xhtml forms
If you want to stretch your
XHTML and CSS skills a bit, see if
you can add the Starbuzz header
and footer to the Bean Machine
page and make the Bean Machine
look really nice with those elements.
The bean machine form now matches
the rest of the Starbuzz site.
Notice that the
nested table
doesn’t have a
border, and the
spacing is tighter;
that’s because
of those rules
that override the
properties set for
the main table.
you are here 631