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.css
  • screen-switcher-high.css
  • screen-switcher-highvisibility.css
  • print-switcher-default.css
  • print-switcher-small-sans.css
  • print-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.

Configure the JavaScript | ← IOTBS Main Page

IOTBS Manual

Categories...

Website gadgets

Bits of site functionality:

Usability widgets

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.


In this area

Main areas


[brothercake] a round peg in a square hole, that still fits