One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
We have currently two ways to specify media dependencies for style sheets −
- Specify the target medium from a style sheet with the @media or @import at-rules.
- Specify the target medium within the document language.
The @media rule
An @media rule specifies the target media types (separated by commas) of a set of rules.
Given below is an example −
<style tyle = "text/css"> <!-- @media print { body { font-size: 10pt } } @media screen { body { font-size: 12pt } } @media screen, print { body { line-height: 1.2 } } --> </style>
The Document Language
In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet −
Following is an example −
<style tyle = "text/css"> <!-- <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>link to a target medium</title> <link rel = "stylesheet" type = "text/css" media = "print, handheld" href = "foo.css"> </head> <body> <p>the body... </body> </html> --> </style>
Recognized Media Types
The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Given below is a list of various media types −
| Sr.No. | Value & Description |
|---|---|
| 1 |
all
Suitable for all devices.
|
| 2 |
aural
Intended for speech synthesizers.
|
| 3 |
braille
Intended for braille tactile feedback devices.
|
| 4 |
embossed
Intended for paged braille printers.
|
| 5 |
handheld
Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
|
| 6 |
print
Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
|
| 7 |
projection
Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.
|
| 8 |
screen
Intended primarily for color computer screens.
|
| 9 |
tty
Intended 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.
|
NOTE − Media type names are case-insensitive.
No comments:
Post a Comment