A brief history of layout techniques on the webLesson 7, Introduction to CSS Layout 1695 In your text editor, add a new rule for paragraphs inside the footer div:
#footer p {
margin:10px 0 0 20px;
width:280px;
font-family:Verdana, Geneva, sans-serif;
font-size:0.689em;
}This rule adds 10 pixels to the top margin and 20 pixels to the left margin of each
paragraph in your footer. By defi ning a width for the paragraphs, you can force a
break approximately where you need it: inside the white space of the image. The font
properties defi ne a diff erent font family and a smaller font-size.6 Save the page and preview it in your browser.
Your footer paragraphs with new styles.In the previous section, you learned that applying padding and margins is a common
technique. You could add more space between the fi rst paragraph and the top of
the footer, but increasing the top margin of the #footer p rule aff ects the second
paragraph. In this case, add padding to the top of the footer as indicated in the next step.
7 Add the following declaration (highlighted in red) to your #footer rule:
#footer {
clear:both;
background-color:#BA2B22;
background-image:url(images/footer_background.jpg);
background-repeat:no-repeat;
width:960px;
height:128px;
padding-top:10px;
}Save the fi le and preview it in your browser. Notice that the additional padding increased
the true height of the footer, but the red background color is extending out. You can
solve this problem in several ways, but the simple solution is to subtract 10 pixels from
the height of the footer.