Beginning XHTML | 5 | WebReference

Beginning XHTML | 5

To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Beginning XHTML

Style Sheet Properties Appropriate to a Media Type

Not every style sheet property is appropriate for every target device. The volume property, for example, refers to what's known as the median volume of a waveform. This property is clearly related to aural media types (i.e. sound) and not to visually oriented media types.

In fact, it turns out that there are relationships between the different media types. These relationships are called media groups, and the World Wide Web Consortium identifies four of these media groups:

Each media type is a member of one or more of these media groups. For example, the screen media type is a member of the continuous, visual, bitmap, interactive, and static media groups.

Continuous or paginated media refers to the surface on which content is rendered. If the surface can always extend to hold all of the content, the media is considered continuous. If the surface has a limited size and additional surfaces must be created to hold all of the content, the media is said to be paginated. Computer screens are continuous and printed pages are paginated. We will talk about paginated media later in this chapter.

Visual, aural, or tactile media refers to how the information is presented to the user:

Computer screens are visual, aural browsers are aural, and Braille printers are tactile.

Grid or bitmap media refers to how the visual or tactile information is rendered. If the information is rendered in a predefined grid layout (every 'character' has the same amount of space), then the media is said to be grid-based. If the information is rendered pixel by pixel (every 'character' uses whatever space it needs), then the media is said to be bitmap-based. Teletypes are grid-based and computer screens are bitmap-based.

Interactive or static media refers to whether the user can interact with the content. As would be expected, when the user can interact with the content, the media is said to be interactive. When the user cannot interact with the content, the media is said to be static. Computer screens are said to be interactive and printed pages are said to be static.

The table below summarizes the relationships between media types and media groups.

Media TypesMedia Groups
Continuous or Paginated Visual, Aural, or Tactile Grid or Bitmap Interactive or Static
aural continuous aural neither both
braille continuous tactile grid both
embossed paginated tactile grid both
handheld both visual both both
print paginated visual bitmap static
projection paginated visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both

Each Cascading Style Sheet property is only valid for one or more media groups. When you are tailoring a presentation to a particular media type, you need to identify the appropriate media group and determine whether you can control the desired property for that media group.

Associating Style Sheets with Media Types

In a previous chapter, you learned how to embed and link style sheets to documents. This same mechanism may be used to associate style sheets with different devices and media types. In summary, there are four different mechanisms for specifying dependencies between style sheets and media types:

The following sections describe each of these mechanisms and some strategies for selecting an appropriate mechanism (in other words, which mechanism should we use?).

Using the <style> Element

The first mechanism for associating style sheets with media types is to use the style element's media attribute.

The <style> element's media attribute specifies the intended destination media for the enclosed style information. This means that the style will only be applied if the device matches the style's media type, and ignored otherwise. For example, if you write:

  <style type="text/css" media="print">
    h1 { font-size: 10; text-align: center }

you are indicating that when the document is printed, the content of a first level header should be rendered using a 10-point font and center-aligned.

The value of the media attribute can be any one of the media type descriptors previously defined (all, aural, braille, etc.). If you want to apply a style sheet to more than one media type, you can separate the media type descriptors using a comma:

  <style type="text/css" media="print, screen">
    h1 { font-size: 10; text-align: center }

In this example, the media attribute is set to print and screen. Therefore, the first level header will appear the same on the printer as on the screen.

Likewise, you can have different style sheets associated with different devices as you will see in the next exercise.

To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Created: March 27, 2001
Revised: March 27, 2001