In addition to creating style sheets for documents that are rendered by browsers, style sheets for other media can be created and read by a variety of agents. For some time we have been able to create a separate style sheet for different types of media.
For instance you can select fonts that are suitable for print, change colors that work better for projectors, get rid of images and menus or whatever is needed to make the document more readable for a particular device.
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:
In order to prevent the user agent from retrieving resources for unsupported media types you can specify media-dependent @import rules within your css.
@import url("name.css") print;
or @import url("name.css") projector;
There are ten media types.
For print all you need to do is create a style sheet that would make your document suitable for print. For example you could change the font and its size, add different margins and get rid of the menus and images, whatever would make the page easier to read.
Intended for handheld devices which typically have a small screen and limited bandwidth.
Most agents for cell phones and eReaders do not read Handheld CSS correctly.
Media Types did not really catch-on for cell phone and eReaders. Intitially web designers created diffent pages for these devices. More recently web designers have begun to create Responsive Web Design that incorporates Media Queries.