CSS Demo: Using the body id attribute to change page style.
This demo shows how you can use the ID attribute on the body tag and the cascade to change the presentation of a web page.
To achieve this effect is not very dificult. First, you should place an ID attribute on the body tag. This will be your base page ID.
<body id="styleone">
Next, create some rules for your base style. Do not use the body id in the selector for these rules. These rules will serve as the foundation for all styles as well as the be the rules for your primary style. For example, rules pertaining to the header are:
#header {
border: 1px solid black;
margin: 0 0 20px 0;
padding: 10px;
background: #efefef;
}
Now, if we want to visually change the header when we change the body's ID attribute we just need to define some new rules that are specific to that body ID. Using descendant selectors we can target the header div on any page whose body ID is "styletwo".
#styletwo #header {
color: black;
background: #FFB5B4;
border-color: #C93E3B;
}
The original rules set for #header are still in effect. Only those that are redefined in the second more specific rule are over-ridden. So now the header is the same size and position on both versions of the page, but the colors are different.
The navigation list is being changed in the same way. The only difference being that no rules are made common to both navigation types, each navigation type's rules are specific to a particular body id.
This method works equally as well using the class attribute of the body tag.