HTML and CSS Reference
In-Depth Information
Figure 7-17.
This page has ignored the contextual styles applied to the three content areas.
So, make sure that you have the correct
id
in the
<body>
tag (
cols3
) and the browser will
know which piece of the CSS it should use to render the web page.
Note
We've used
cols3
as the
id
rather than
3cols
—which would be a more appropriate name—
because an
id
cannot start with a number, according to the XHTML recommendations defined by the W3C
(
www.w3.org/TR/html4/types.html#h-6.2
).
■
Switching the Design to a Splash Page
Let's consider another variant of this design: a splash page that doesn't require any left or right
navigation (but the header and footer should remain). The first thing we need to do is change
the
id
value in the
body
element:
<body id="splash">
Next let's define display rules that will apply only if the page has an
id
in the
body
of
splash
(contextual selectors, as you'll recall):
/* Splash page styles */
body#splash #content-wrapper {
padding-left:1em;
padding-right:1em;
}
