HTML and CSS Reference
In-Depth Information
1.
<nav
class="primary-nav"
>
2.
...
3.
</nav>
CSS
1.
.primary-nav {
2.
font-size: 14px;
3.
font-weight: 400;
4.
}
9.
With the
<header>
element in slightly better shape, let's also take a look at our
<footer>
element. Using the
primary-footer
class, let's change the
col-
or
and
font-size
for all the text within the
<footer>
element. Additionally,
let's bump up the
font-weight
of the
<small>
element to
400
.
Including the existing styles, the styles for our primary footer section should look
like this:
1.
.primary-footer {
2.
color: #648880;
3.
font-size: 14px;
4.
padding-bottom: 44px;
5.
padding-top: 44px;
6.
}
7.
.primary-footer small {
8.
float: left;
9.
font-weight: 400;
10.
}
10.
Let's update our home page a bit, too. We'll start with the hero section, increasing
the overall
line-height
of the section to
44
pixels. We'll also make the text
within this section larger, increasing the
<h2>
element's
font-size
to
36
pixels and the
<p>
element's
font-size
to
24
pixels.
We can make all of these changes by using the existing
hero
class selector and
creating new selectors for the
<h2>
and
<p>
elements. Our styles for the hero sec-
tion will now break down in this way:
1.
.hero {
2.
line-height: 44px;
3.
padding: 22px 80px 66px 80px;
4.
}
Search WWH ::
Custom Search