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.
Click here to view code image
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.
Click here to view code image
1. /*
2. ========================================
3. Primary footer
4. ========================================
5. */
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.
Click here to view code image
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