HTML and CSS Reference
In-Depth Information
The silver bars are the result of the background color set on the
<body>
showing through.
They are formed because of the default margin properties set on the
<h1>
and
<h3>
head-
ings used on the page. Remember that margins are outside of the border of an element's
box, and the
background-color
property on a box colors only the interior content, not
the margin. This applies even when you have a
<div>
wrapped around a heading, such as
<h1>
. The margin extends beyond the edge of the
<div>
's background-color.
To fix this, we explicitly set the heading margins to zero on the heading tags. Listing
13.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 not only the
original design of the website, but also the actual colors used at the Dunbar school audi-
torium, too.
LISTING 13.3
A Style Sheet for Colors and Fonts
/* dunbar-colors-13.3.css */
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; }
13
#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; }
