HTML and CSS Reference
In-Depth Information
Let's start by adding the class of
primary-footer
to the
<footer>
element.
Because we know we'll be floating an element within the
<footer>
element, we
should also add the class of
group
while we're at it.
1.
<footer class="
primary-footer
container
group
">
2.
...
3.
</footer>
6.
Now that the class of
primary-footer
is on the
<footer>
element, we can
use that class to prequalify the
<small>
element with CSS. We'll want to select
and
float
the
<small>
element to the
left
. Let's not forget to create a new
section within our
main.css
file for these primary footer styles.
1.
/*
2.
========================================
3.
Primary footer
4.
========================================
5.
*/
6.
7.
.primary-footer small {
8.
float: left;
9.
}
To review, here we are selecting the
<small>
element, which must reside within
an element with the class attribute value of
primary-footer
, such as our
<footer>
element, for example.
7.
Lastly, let's put some
padding
on the top and bottom of the
<footer>
element
to help separate it a little more from the rest of the page. We can do this directly by
using the
primary-footer
class with a class selector.
1.
.primary-footer {
2.
padding-bottom: 44px;
3.
padding-top: 44px;
4.
}
With all of these changes to the
<header>
and
<footer>
elements, we have to be sure
to make them on every page, not just the
index.html
page. Our current home page is
shown in
Figure 5.7
.
Search WWH ::
Custom Search