HTML and CSS Reference
In-Depth Information
So, what's wrong with the
header anyway?
Clearly, we've messed up the formatting a bit by
adding the
<header>
elements. Why? Let's take
another look at the “starbuzz.css” file and check
out the rule for the
<header>
element:
header {
background-color: #675c47;
margin: 10px 10px 0px 10px;
height: 108px;
}
We can fix this by creating a class just for the
<header>
at the top of the page. We might have
several
<header>
elements in sections and articles
throughout the site, and in our case, for Starbuzz
Coffee, the
<header>
at the top of the page will
always be treated differently from these other headers
because it has a special graphical look. So, first find
the top
<header>
element in your “blog.html” file
and add a class named “top” to the element:
The rule for
styling the header wo
rks
great for th
e main header but loo
ks
terrible for
the headers in the ar
ticles.
Ad
d the cl
ass “top
” to the
first
<he
ader> e
lement i
n the pa
ge.
<body>
<header class="top">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="Starbuzz Coffee header slogan image">
</header>
...
Add the “top” class to the top
<header>
in your “index.html” file, too.
