. The margin extends beyond the edge of the

’s background-color.

To fix this, we explicitly set the heading margins to zero on the heading tags. Listing
15.3 is a style sheet that not only does that, but also assigns colors, fonts, and other styles
on the site. The teal, purple, white, and yellow colors were chosen to reflect the original
design of the website, and the actual colors used at the Dunbar school auditorium.

LISTING 15.3 A Style Sheet for Colors and Fonts

body { font-family: Optima, sans-serif; }
a:link { color: #055; }
a:visited { color: #404; }

header { text-align: center;
color: white; background-color: #055; }
header h1, header h2
{ margin: 0; }
header h1 { color: #FFFF00; font-size: 250%; }
header h2 { font-weight: normal; font-style: italic; }

#sitenav { color: white; background-color: #404; }
#sitenav ol { font-size: 90%; text-align: center; }
#sitenav li { margin-left: 1em;
border-left: 1px solid #DD0; }
#sitenav li a:link, #sitenav li a:visited
{ color: white; text-decoration: none; }
#sitenav li a:hover
{ color: #DDDD00; }

#main { background-color: #055; }

#content { background-color: white; padding: 1em 5em; }
#content h3 { margin-top: 0; }
#content p { font-size: 90%; line-height: 1.4; }

#sidebar h3 { font-size: 100%; color: white; margin: 0;
font-weight: normal; padding: 0.125em 0.25em;
background-color: #404; }
#sidebar ol { background-color: white; border: 2px solid #404;
border-top: 0; margin: 0 0 1em 0;
padding: 0.125em 0.25em; }
#sidebar li { font-size: 85%;
display: block; padding: 0.125em 0; }