Prev | Current Page 486 | Next

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"

This is followed
by a paragraph of text and then a blockquote element, as per ???Creating pull quotes in
CSS??? from Chapter 3.
Next, a horizontal rule provides a visual break from the introductory content, followed by
two divs that have class values of columnLeft and columnRight. As you??™ve no doubt
guessed, these are the two columns; each contains an image, a level-two heading, and a
paragraph. The final piece of code within the content div is a footer paragraph.
Styling the business website
The sme.css document contains the styles for this layout, arranged into sections, as per
the discussion earlier in this chapter. The defaults section includes two rules. The first is
the universal selector (*), used to remove padding and margins (as per ???Zeroing margins
and padding on all elements??? in Chapter 2). The second is a body rule, which adds some
vertical padding to the web page, ensuring there??™s always some space before and after the
bordered content (having borders directly touch browser window edges makes for a
cluttered and visually unappealing design), and defines the page background??”a dark
gray color (#333333) into which is blended the horizontally tiled background image
page-background.gif.
body {
padding: 20px 0;
background: #333333 url(assets/page-background.gif) repeat-x;
}
In the structure section, the #wrapper rule defines a fixed width for the wrapper, horizontally
centers it, and defines a one-pixel border around its edges.


Pages:
474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498