CSS media and alternative style sheets tutorial

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

Learning goals

• Understand CSS float
• Be able to create simple layouts using floats

Prerequisite

• CSS text styling tutorial
• CSS color and background tutorial
• CSS box model tutorial

Concurrent

• CSS tutorial (summary)
• CSS float tutorial

Moving on

• CSS positioning tutorial
• CSS for XML tutorial
• DHTML
• CSS compatibility

Level and target population

• Beginners

Teaching materials (Examples)

• http://tecfa.unige.ch/guides/css/ex/media
• This page (some CSS demos included)

Remarks

• This tutorial is intended for students in a field that is technology intensive (e.g. computer applications or educational technology). For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).
• There are some inline examples. However, they had to be created in a away that makes them fit into a wiki page. I.e. we use inline style (something we usually don't advocate) and we also had to add extra styling properties.

Introduction

You can define alternate stylesheets to meet various user preferences. Often, designers define different stylesheets for different media types.

CSS allows to to create:

• Stylesheets for different media types (e.g. your screen, a printer or a hand-held device)
• Stylesheets for different people (e.g. allow people with poor eyesight to enjoy larger letter)

Media types

The CSS 2.1 specification distinguishes the following media types

1. all - suitable for all devices.
2. braille - for braille tactile feedback devices.
3. embossed - for paged braille printers.
4. handheld - for handheld devices (typically small screen, limited bandwidth).
5. print - for paged material and for documents viewed on screen in print preview mode.
6. projection - for projected presentations, for example projectors.
7. screen - primarily for color computer screens.
8. speech - for speech synthesizers. Note: CSS2 had a similar media type called 'aural' # for this purpose.
9. tty - for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
10. tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Important notice: "Handheld" is happily ignored by most phone browsers (smart phones in particular) and you will have to resort to more complicated approaches.

Linking several style sheets

Firstly, you should remember that you can load several stylesheets in a row. E.g

 <link rel="stylesheet" type="text/css" href="default.css" />
 <link rel="stylesheet" type="text/css" href="articles.css" />

There exist three methods for defining alternative styles

• Use link and "alternative stylesheet" to load alternative style sheets
• Use the CSS @import rule to load alternative style sheets
• Use the @media rule within a single stylesheet

Alternative stylesheets with the link HTML element

(1) You may define alternative stylesheets, e.g. one that uses a bigger font for people with bad eyesight. Most browsers allow users to select from alternative stylesheets. E.g. in Firefox through the View->Page Style menu.

Now, these stylesheets have to be linked in a special way unless they are media specific. In the example below we define two stylesheets for the screen medium. The 2nd and 3rd are alternate stylesheets that the user can choose.

 <link rel="stylesheet" type="text/css" media="screen"
        title="Default style" href="default.css" />
 <link rel="alternate stylesheet" type="text/css" media="screen"
        title="Friendly fonts" href="friendly.css" />
 <link rel="alternate stylesheet" type="text/css" media="screen"
        title="bigtype" href="big.css" />

In addition, you should provide JavaScript code that will allow the user to switch style (a typical user may not know how to do this manually). A older very popular and free example is available from AlistAPart. A simpler, more elegant more sophisticated 2004 version also exists.

Alternative stylesheets with the CSS @import rule

The @import at-rule allows to specify a media type, i.e. you may use this strategy to load various CSS variants from a single CSS file.

 @import url(print-style.css) print;

Also, you often will find the @import CSS at-rule as replacement of the HTML link tag. E.g. the two following expressions are identical:

(a) Import a style-sheet with @import

<style type="text/css">
 @import url(css-intro.css)
</style>

(b) Import the normal way

 <link rel="stylesheet" href="css-intro.css" type="text/css">

Alternative styles with the CSS @media rule

Media-specific alternatives also can be defined within a single style sheet using the @media at-rule.

@media print {
  body {
    padding: 3cm;
  }

@media screen, projection {
  body {
    padding: 1cm;
  }
}

Testing

....

Style sheet switching

(to be written)

In the meantime, read Alternative Style: Working With Alternate Style Sheets

• Smartphone Browser Landscape by Peter-Paul Koch