HTML and CSS Reference
In-Depth Information
And a look at the style
Let's get a good look at the CSS that styles the new Starbuzz page. Step through
the CSS rules carefully. While the new Starbuzz page may look a little advanced,
you'll see it's all just simple CSS that you already know.
F
irst, we just s
et up
s
ome basics in t
he body:
a
background c
olor and
f
onts, and we a
lso set the
m
argin of the
body to 0.
T
his makes sure
there's no
e
xtra room aro
und the
e
dges of the p
age.
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:
small;
margin:
0px;
}
#header {
background-color: #675c47;
margin:
10px;
height:
108px;
}
#main {
background:
#efe5d0 url(images/background.gif) top left;
font-size:
105%;
padding:
15px;
Next
, we have a ru
le for
each
logical section
. In
each,
we're tweakin
g the
font
size, adding p
adding
and m
argins and als
o—in
the c
ase of main a
nd
the s
idebar—specif
ying a
backg
round image.
margin:
0px 10px 10px 10px;
}
#sidebar {
background:
#efe5d0 url(images/background.gif) bottom right;
font-size:
105%;
padding:
15px;
margin:
0px 10px 10px 10px;
}
#footer {
background-color: #675c47;
color:
#efe5d0;
Next, we se
t up the font
s and
colors on t
he headings.
text-align:
center;
padding:
15px;
margin:
10px;
font-size:
90%;
}
h1 {
And
then some co
lors on the cla
ss
call
ed slogan, whic
h is used in th
e
side
bar <div>, and
likewise with
the
beanheading c
lass, which is
used
there as wel
l.
font-size:
120%;
color:
#954b4b;
}
.slogan { color:
#954b4b;}
.beanheading {
text-align:
center;
line-height: 1.8em;
}
