HTML and CSS Reference
Test drive the styled form
If you w ant to st retc h yo ur H TML
You're going to add two <link> elements to the <head> of your
HTML in “styledform.html”, linking in the Starbuzz stylesheet from
Chapter 12, “starbuzz.css”, and your new stylesheet, “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 stylesheets linked,
save and reload your page. You should see the snazzy, styled version
of the Starbuzz Bean Machine in your browser.
and CS S ski lls a bit, see if you
can add the Sta rbuz z he ader and
foo ter to t he B ean M ach ine p age
an d ma ke th e Be an M ach ine lo ok
re ally n ice w ith t hose elem ents .
Wow, what a difference a little style makes!
The Bean Mac hine form now mat ches
the rest of t he S tarbu zz s ite b ette r.
The labels are
align ed with the
top of the form
elem ents, and
they 're aligned to
the right as well.
mak es it easier to
see which labels
belo ng with which
Th e “Ship to”
he ading is bol d,
jus t like we w anted.
We 've got two columns and all the content in the rows line s up nicely!