Media Types permit you to identify how documents can be presented in the dissimilar media. The document might also be displayed differently on screen, on paper, with the aural browser, and many.

Media Types

Some of the CSS properties are designed for the certain media. For instance “voice-family” property is here designed for the aural user agents. A few other properties can also be used for the diverse media types. For instance, “font-size” property can also be used for the screen and the print media, perhaps with the different values. The document generally needs the larger font-size on the screen than on the paper, as well as sans serif fonts are very easy to read on screen, as serif fonts are easy to read on the paper.

@media Rule

@media rule also allows the different style rules for the different media in same style sheet.

If you tell the browser to display the pixels 14 font Verdana on screen. But if page is printed, then it will be in ten pixels Times font. The font weight here is set to bold, on screen and on the paper:

Recognized media types

The CSS media type names the set of the CSS properties. The user agent, which claims to hold up the media type by the name, should implement all the properties, which apply to that particular media type.

The names selected for the CSS media types imitate target devices for that the relevant properties make a little bit of sense. In following list of the CSS media types, parenthetical particulars are not normative. They give the sense of what device media type is all meant to submit to all.

Suitable for all of the devices.

Aural: Planned for the speech synthesizers.

Braille: Intended for Braille tactile feedback devices.

Embossed: Intended for the paged Braille printers.

Handheld: Intended for the handheld devices (naturally the small screen, the monochrome and the limited bandwidth).

Print: Intended for the paged, the opaque material as well as for the documents viewed on the screen in the print preview form.

Projection: Intended for the projected presentations, for instance projectors or else print to the transparencies.

Screen: Intended primarily for the color PC screens.

TTY: Intended for the media using the fixed-pitch quality grid, like the teletypes, terminals, or else portable devices with the partial display capability. Authors must not make use of the pixel units with “tty” media type.

TV: Intended for the television type devices the low resolution, color, limited scroll ability screens and the sound accessible.

Media type names are also very case-insensitive.

Media groups

Every CSS property definition identifies the media types for that a conforming user agent must implement the property. Since the properties normally apply to quite a few media, “Applies to the media” section of every property definition the lists of the media groups rather than the individual media types. The every property applies to the media types in media groups that are listed in its definition.

CSS2 defines following media groups:

Continuous or else paged. It means that property in question relates to the media groups.

Visual, aural, or else tactile.

Grid for character grid devices or else the bitmap. Means that property in question relates to media groups.

Interactive for the devices, which allow the user interaction, or else the static. It means that property in question relates to the both media groups.

Creating the Print Style Sheet

To make the independent style sheet that is featuring all your print styles:

1. Make the text file that is called print.css.

2. Save it to your folder.

3. Type or else paste to get print styles started also save the file:

4. Make a link in head section of header.php template file

Printing the Header

Header of many sites can be large, at times filling top third or else more of page. This is pointless as well as consumes the paper while printing; as a result you can change look as well as size of the header in print styles.

Now header is set to height of around 200 pixels, features text, which is very large more than 250% of base font size as well as displays the bright yellow color. The height of header is to put up the graphics, also by default, any of the background images in the styles that will not print; you can just have the empty space on your very large header label. You want to change the form to make header smaller also make font size and the color more reasonable for the printing.

Printing Print Sizes

You can control printed font sizes using the points instead of the pixels or else as all are linked to information that printer can know.

Printing Comments

Generally, most of the people want to convert the comments, however they certainly don’t want to see comment form when the page is been printed. Comment form is for utilization on the screen as well as can take most of the sheet of paper while printing.

Tags: CSS Styling for Print and Media Type