Types of media

The wide development of different platforms and facilities forces the developers to create the special site versions for them, that is quite laborious and problematic. At the same time, times and needs change and the site creation for the different facilities are inevitable and necessary link of its development. With a glance of it, the term of the media type was introduced, when the style is used only for the definite adoption.

Table 3.1. Types of media and their description.

Type Description
all All types. This value is used by default.
aural Speech synthesizers, and programs for playback the text aloud. For example, speech browsers.
braille Devices, which are developed on the Braille system. They are aimed for blind people.
handheld Handheld computers and similar devices.
print Printing mechanism like printer.
projection Projector.
screen Screen.
tv TV.

In CSS commands @import and @media are used to define the media type. With the help of these commands you may define a certain style for elements, it depends on the fact whether the document is displayed on the screen or is printed.


The key-words @media and @import refer to the at-rules. Such name developed from the denotation of the symbol @ - “at” with which these key-words start.

When using style import via @import command, the media type is indicated after the address of the file. At the same time it is possible to set several types at once with commas like it is shown in the example 3.1.

Example 3.1. Import of the style file.

  Импорт стиля
  <!--   @import "/style/main.css" screen; /* Style for displaying the result on the screen */   @import "/style/palm.css" handheld, print; /* Style for printing */ -->

In the given example two files are imported – main.css is used to change the look of the document while viewing it on the display, and palm.css – while printing the page and its displaying on the CPC.

The command @media allows the indication of the media type for global or joined style sheet. Syntax:

@media media type 1 {
 Description of the style for media type 1
@media media type 2 {
 Description of the style for media type 2

After the key-word @media goes one or several media types, enumerated in the table 3.1, if there are more than one, they are separated by commas. After that the obligatory braces comes, inside of which there is a usual description of the style rules. In the example 3.2 is shown how to set the different style for printing and displaying.

Example 3.2. Styles for the different media types.

  Media types
  <!--    @media screen { /* Style for displaying in the browser */     BODY {      font-family: Arial, Verdana, sans-serif; /* Sans-serif type */      font-size: 90%; /* Font size */      color: #000080; /* Colour of the text */     }     H1 {      background: #faf0e6; /* Colour of the text */      border: 2px dashed maroon; /* Border around the title */      color: #a0522d; /* Colour of the text */      padding: 7px; /* Fields around the text */     }     H2 {      color: #556b2f; /* Colour of the text */      margin: 0; /* Remove indents */     }     P {      margin-top: 0.5em; /* Space before */     }    }    @media print { /* Style for printing */     BODY {      font-family: Times, serif; /* Serif type */     }     H1, H2, P {      color: black; /* black text */     }    } -->

In this example we see two styles – one style is used for changing the view of elements when they are displayed in the browser, and the second one is used when printing the page.  But the document’s image can differ from each other, as it is shown in the figures 3.1 and 3.2.

Figure 3.1. The page for displaying in the browser window.

Figure 3.2. The page for printing.

It is possible to view the document, in which the CSS is set like the type print, if to print the particular page. Or temporarily substitute the word print for the word screen in order to display the result in the browser. In this way the figure 3.2. was received.

The command @media is used to form one style file, which is divided into blocks according to the device type. Sometimes it is sensible to create several different CSS files –one for printing, and another for displaying in the browser.  In this case you should use tag <LINK>  with media parameter , the value of which are all the types mentioned in the table 3.1.

In the example 3.3 you may see the ways of creation of the links to CSS files, which are aimed for different media types.

Example 3.3. The connection of styles for the different media types.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  Different media

Two joined style sheets are used in this example, the one is for displaying in the browser, and the other is for printing the document. Though two different styles are at the same time downloaded on the page, they are used only for the particular media.