Styles for Media Types

In addition to creating style sheets for web pages, style sheets for other media can be created. Web designers no longer need to worry about how their page will look in print or have to take unnessary time and energy creating different pages for print . For some time we have been able to create a separate style sheet for different types of media. There are ten media types.

Also see Cascade Rules and CSS Rules .

Print

For print all you need to do is create a style sheet that would render your page suitable for print.
This page has a style sheet for print which is using exact the same html code. Just print out the page and you will see the difference

Display None

For print you need to get rid of any unneccessary images and menus.
You can do this by creating a class for images and divs that you do not want to show up in the print and set a corresponding style to display: none;

for example:

.noPrint{

display: none;

}

Font Styles

Instead of having your font sizes in ems or pixels set them to pts. You may want to reset the sizes for your headers.
Any light colored text (which probably shows up well on the screen) set to darker colors for print.

Page Breaks

You can set page breaks in the print css. You can insert a class within the web page at the point that you would like the information to appear on a new printed page;

You will use the:

The property in your style sheet: page-break-after

These are the properties

auto : is the default this breaks the page where the browser would normally break the page
always: this will break the page after where-ever you have inserted the class
avoid: advoids a page break after a particular element (in tour case the class

As far as I know left and right are not supported by any browser yet

left: is used if your printer will print both sides of a page. This would be the left hand side of a two page spread

right: same as above but on the right

CSS

.pagebreak {
page-break-after:always;
}

HTML

Handheld

Intended for handheld devices which typically have a small screen and limited bandwidth.

Web pages are now frequently viewed on cell-phones.

All cell phones do not use the same browser

Some browsers designed for cell phone do not read "handheld" css correctly

We will discuss "handheld" in more detail in a later publication.

Screen

Primarily for Color Computer Screens.

All

This is the default - All Devices

Braille

Braille tactile feedback devices

Projection

Projected Presentations

http://www.w3.org/TR/CSS2/page.html

Aural / Speech

Speech Synthesizers
http://www.w3.org/TR/CSS2/aural.html

tty

Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities)

http://www.w3.org/TR/CSS2/syndata.html#pixel-units

tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available)

Linking to Different Style Sheets

When linking to specific style sheets you need to indicate the media within the link.
Below are links to style sheets for the screen and print

@import rule

In order to prevent the user agent from retrieving resources for unsupported media types the you can specify
media-dependent @import rules within your css.

@import url("print.css") print;