IOTBS Manual
Step 5: Write the CSS
Writing the rules for each option
As we've seen before, the IOTBS CSS rules will either be in one, or a number of stylesheets, depending on which of the implementation modes you're using.
Now that we come to writing the actual CSS for each option, there are only two different ways - one approach for standard mode, and one for load or integrate mode.
Standard mode
In standard mode, the script works by adding one or more
unique class names to the
page's <body> or <html> tag;
rules are then defined using descendent selectors from them.
So a single style sheet can contain all the options and media types you want. For example, here are some rules for our screen switcher control:
@media screen {
body {
background:#fff;
color:#666;
}
body.high {
color:#000;
}
body.highvisibility {
background:#000;
color:#ff0;
}
}
And here are some for print:
@media print {
body {
font:100% "lucida sans unicode", verdana, sans-serif;
}
body.small-sans {
font:80% "lucida sans unicode", verdana, sans-serif;
}
body.large-serif {
font:120% "times new roman", times, serif;
}
}
The "default" class name equates
to no class name at all, and it specifically equates
to no class name, so
"body.default" rules will never be applied.
Load or integrate mode
In load or integrate mode, neither <body>
nor <html> class names
are used - the script doesn't need to identify
groups of rules, because each option has its own stylesheet
(named according to our much-vaunted
naming convention).
So, for our demo we'd end up with six stylesheets:
screen-switcher-default.cssscreen-switcher-high.cssscreen-switcher-highvisibility.cssprint-switcher-default.cssprint-switcher-small-sans.cssprint-switcher-large-serif.css
The rules for each option are then defined in the appropriate style sheet.
There's no need to use descendent selectors from
body.something class names.
Styling the switcher controls
The switcher controls are made from proper semantic mark-up, and can be styled according to any site design. Here's what the HTML looks like for each control; we'll leave the styling up to you :-)
Original
<form action=""> <fieldset> <label for="select-screen-switcher"> <span>Screen styles</span> <select id="select-screen-switcher"> <option value="default" selected="selected"> Normal contrast </option> <option value="high"> High contrast </option> <option value="highvisibility"> High visibility </option> </select> </label> </fieldset> </form>
The Director's Cut
<dl id="select-screen-switcher">
<dt>Screen styles</dt>
<dd class="selected">
Normal contrast (selected)
</dd>
<dd>
<a href="javascript:void('high', 'High contrast')">
High contrast
</a>
</dd>
<dd>
<a href="javascript:void('highvisibility', 'High visibility')">
High visibility
</a>
</dd>
</dl>
The Radio Edit
<form action=""> <fieldset> <legend>Screen styles</legend> <label for="for-screen-switcher-default"> <input type="radio" name="select-screen-switcher" id="for-screen-switcher-default" /> <span>Normal contrast</span> </label> <label for="for-screen-switcher-high"> <input type="radio" name="select-screen-switcher" id="for-screen-switcher-high" /> <span>High contrast</span> </label> <label for="for-screen-switcher-highvisibility"> <input type="radio" name="select-screen-switcher" id="for-screen-switcher-highvisibility" /> <span>High visibility</span> </label> </fieldset> </form>
Please note: the tabs and line-breaks in these examples are just for demonstration - the code that's actually generated doesn't have any non-essential whitespace.
![[php]](/images/php.gif "Uses PHP")