HTML and CSS Reference
In-Depth Information
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.
This
alignment
mak
es it easier to
see
which labels
belo
ng with which
con
trols.
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!
