Page Layout with CSS - Web Development and Design Foundations with XHTML - page 264

Figure 6.31
New style rules for
the h2 selector
extra padding. Open painter.css in a text editor and update the style rules with
the following:
h2 { margin: -10px 5px 5px 0px;
padding: 5px;
font-family: Verdana, sans-serif;
font-size: .90em;
float: left;
width: 200px;
background-color: #336600;
color: #ffffff;
text-transform: uppercase;
}
.desc { padding: 5px 0 20px 0;
border-top: 1px solid #336600;
}
Save the painter.css file. Modify the testimonials.html page by assigning the
paragraphs to the desc class. Save your file. Test your pages in a browser. Your
testimonials.html page should be similar to the one shown in Figure 6.31. The
other pages should display as they did at the end of Step 4. Consider modifying
the unordered list on the Services page (services.html) to use <h2> and <p>
elements (assigned to the desc class) instead—the result will be a more cohesive
design for your Web site.
In this case study you changed the page layout of the Pasha the Painter Web site pages.
Notice that with just a few changes in the CSS and XHTML code, you configured a
two-column page layout.