Again, I'm not going to give help on doing elaborate tricks that can cause problems for people. If you want to do things like that, look elsewhere. I'm just going to discuss using a few simple tricks, that can be handy.
As before, I'll recommend that you should read the morons in webspace page, which goes into detail about what people find seriously annoying about websites, and common serious mistakes in webpage authoring, before you get keen on adding all sorts of gumph to pages.
One problem with using CSS, is that many (that's “many” not ”most”) browsers don't support it, or support it well. It can become necessary to provide alternatives to CSS, for them. Not that you should ever rely on CSS, nor any “trick”, to make a page coherent; only use such things to improve a page.
For instance, this document uses boxes around various things, to separate them from the adjacent information. This helps to make the document a bit more coherent, but wouldn't have that effect when the CSS wasn't being used by a browser. So I've placed horizontal rule (hr) elements between some of these sectioned objects, and used CSS to hide them (they're hidden when the browser is using CSS, and drawing the boxes; but displayed when CSS isn't being used).
This could be done by giving such elements a class, that hides them:
| CSS: | .hidden {display:none;} |
|---|---|
| HTML: | <hr class="hidden"> |
(Showing just the bits that you'd put into the CSS and HTML files.)
Or, you could just type the style rule directly into the element:
<hr style="display:none;">
Either approach has the same effect (browser quirks, notwithstanding), how you do it is up to your own preferences for using CSS.
If you had a collection of styles with some commonalities (e.g. they all shared the same margins), and a few individual aspects (e.g. they used different colours), then write all the common aspects into a ruleset that handled all of those classes, and write separate rules for the individual bits. This saves some typing, and helps to keep things consistent, as there's less chance of a typing error, while you try to duplicate the information again and again. It also helps with future modifications, as you have fewer things to adjust.
.example, .explanation, .informational
{
border-width: thin;
border-style: solid;
margin: 2em;
padding: 0.5em;
}
.example
{
color: black;
background-color: #ffdddd;
border-color: #aa8833;
}
.explanation
{
color: black;
background-color: #ddfedd;
border-color: #88aa33;
}
.informational
{
color: black;
background-color:#dfffff;
border-color: black;
}
The first rule sets the common layouts used for “example”, “explanation”, and “informational”, classes. The following rules sets the individual rules for each of those classes.
The rules don't all have to be in the one stylesheet. For instance, if you forsee that you might make different coloured versions, you could put the layout styles into one stylesheet, and the colours into another. Then, to change colours, you just change the coloured stylesheet. Likewise, you could change the layouts stylesheet for different reasons (printing, projection, etc.), keeping the coloured stylesheet the same.