CSS Tutorials

One of the most important features of style sheets is that, you can specify separate style sheets for different media types. This is one of the best ways to build printer friendly Web pages — Just assign a different style sheet for the "print" media type.Some CSS properties are only designed for certain media.

However there are several properties that may be shared by different media types, but may require different values for that property. The font-size property for example can be used for both screen and print media, but possibly with different values.

A document usually needs a larger font on a computer screen as compared to the paper for better readability, also sans-serif fonts are considered easier to read on the screen, while serif fonts are popular for printing. Therefore it is necessary to specify that a style sheet, or a set of style rules, applies to certain media types.

Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media).

On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the 'font-size' property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

Different types media available in CSS:

• all: Suitable for all devices(default).
• aural: Intended for speech synthesizers.The styles should be used with speech synthesizers.
• braille: Intended for braille tactile feedback devices.The styles should be used with braille devices
• embossed: Intended for paged braille printers.The styles should be used on paged braille printers.
• handheld: Intended for handheld devices (typically small screen, monochrome, limited bandwidth).The styles should be used on small, usually monochrome, devices such as phones.
• print: Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.The styles should be used on paper formats and documents viewed in "print preview" mode.
• projection: Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.The styles should be used with projection devices like overheads.
• screen: Intended primarily for color computer screens.The styles should be used on color computer screens.
• tty: Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.The styles should be used on teletype style devices with a fixed-pitch character grid.
• tv: Intended for television-type devices.The styles should be used on television style devices, with low resolution, color and sound.