HTML and CSS Reference
In-Depth Information
How to update your CSS for the new elements
Let's update the CSS to reflect our new elements. Don't worry; we've already got all
the basics correct in the CSS file. All we need to do is change the selectors a bit:
body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
#header {
header {
background-color: #675c47;
margin: 10px 10px 0px 10px;
height: 108px;
}
#header img#headerSlogan {
header img#headerSlogan {
float: right;
}
First, remove the # m
ark from the header rules.
We're going from targe
ting a <div> with an id of
“header" to an element
named header.
Saving some t
rees…just imagine the
rest of the C
SS here.
...
Here we need to change this from targeting an
element with an id of “sidebar" to an aside element.
#sidebar {
aside {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
vertical-align: top;
}
#footer {
footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 0px 10px 10px 10px;
font-size: 90%;
}
...
Final
ly, we need to
selec
t the footer
eleme
nt.
Ahh…much better.
Test drive #2
All right, that's all we need to do; let's give it another try, and this
time you should see the page is back to normal. In fact, it should
look exactly like it did before we add the HTML5 markup.
