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.
<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">
Add the “top” class to the top <header> in your “index.html” file, too.
Search WWH ::

Custom Search