HTML and CSS Reference
In-Depth Information
simply assign an ID to the
body
element on those pages (
<body id="homepage">
and
<body
id="contact">
), and then create alternate rules with higher-scoring selectors:
body#homepage #content {
float:right;
}
body#homepage #sidebar {
float:left;
}
body#contact #content {
width:100%;
}
body#contact #sidebar {
display:none;
}
Figure 3-16.
Our basic layout, with the sidebar moved to the left
Figure 3-17.
The same layout, with the sidebar hidden thanks to specificity
Our default selectors each include an ID, but our alternate styles include two IDs and thus
have a higher specificity. The
body
element selector at the beginning of our alternate rules is
simply there for clarity; the addition of an element selector to the score doesn't make a differ-
ence in this case because the IDs are more important (see Table 3-5).
