CHAPTER 15
STYLING <BODY>
WEB STANDARDS SOLUTIONS
244
One of the benefits of separating content from presentation is flexibility. By using CSS to
control a site’s layout (as we saw in Chapter 12), we can control an entire site’s design.
Change a few rules, and instantly and dramatically update thousands of pages.
Just one example of the flexibility gained from choosing to use CSS to control a site’s lay-
out comes from styling the <body> element. By adding a class or id to the <body> ele-
ment, you can take advantage of customized control over any element on the page,
eliminating the need for duplicating shared rules.
In this chapter, you’ll discover how adding class to the <body> element enables you to
toggle between two separate layouts while sticking with the same markup structure.
Two and sometimes three columns
When we redesigned the website for Fast Company using a CSS-based layout, one of the
challenges was that while sections like navigation and footer information were shared on
every page, we needed to create two different page layouts.
One layout would be used for “index pages” (see Figure 15-1)—pages that have naviga-
tional purposes, allowing the user to drill further down into the directory structure of the
site. We decided these pages should have a three-column layout.
The second type of page layout was an “article page” (see Figure 15-2). Any page that was
considered a destination had this type of layout. For increased readability, we chose to omit
the left column, leaving two—one large column for content, and one for advertising.
STYLING <BODY>
245
15
Figure 15-1. Example of a Fast Company “index page” with three columns
WEB STANDARDS SOLUTIONS
246
Figure 15-2. Example of a Fast Company “article page” with two columns
The reason I explained all of that wasn’t to prove that we had cracked some brilliant layout
puzzle—but rather to show how applying a class to the <body> element allowed us to
adjust the column widths and drop or omit a third column depending on the page type. All
of this was done without duplicating any rules or without importing additional style sheets.
Markup and style structure
This will start to make more sense when I describe a distilled version of the markup struc-
ture that was used for both types of pages. To achieve the columnar layout, I used the
absolute positioning method, as described in Chapter 12.
Article page
For article pages, a simplified look at the markup structure went something like this:
STYLING <BODY>
247
15
<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>
CSS rules were put in place to give the #content and #footer a right margin wide enough
for the #right column to be placed using absolute positioning; in this case, 190 pixels was
just enough.
#content, #footer {
margin: 10px 190px 10px 10px;
}
Index page
For index pages, the markup structure was kept exactly the same, saving the need for
duplicating shared CSS rules—yet an additional <div> is added for a third column (#left)
to the left of the #content.
<div id="header">
...header info here...
</div>
<div id="content">
...content here...
</div>
<div id="left">
...left column info...
</div>
<div id="right">
...right column info...
</div>
<div id="footer">
...footer info...
</div>
Get Web Standards Solutions: The Markup and Style Handbook, Special Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
