HTML and CSS Reference
In-Depth Information
Click here to view code image
1. <nav class="primary-nav" >
2. ...
3. </nav>
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:
Click here to view code image
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:
Click here to view code image
1. .hero {
2. line-height: 44px;
3. padding: 22px 80px 66px 80px;
4. }
Search WWH ::

Custom Search