CSS - Media Type (Screen, Paper, )

About

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types.

For example, a document may use:

on a screen, sans-serif fonts when displayed
when printed, and serif fonts.

screen and print are two media types that have been defined.

Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

Style sheet specify how a document is to be presented on different media

screen,
print (paper),
speech synthesizer,
braille device

Articles Related

Property

CSS properties can be applied :

only for certain media (e.g., the 'page-break-before' property only applies to paged media).
for different media types. For example, the 'font-size' property is useful both for screen and print media.

Type

Media type names are case-insensitive.

Name	Visual	paged	Designation
all	-	-	Suitable for all devices.
braille	No	-	Intended for braille tactile feedback devices.
embossed	No	Yes	Intended for paged braille printers.
handheld	Yes	-	Intended for handheld devices (typically small screen, limited bandwidth).
print	Yes	Yes	Intended for paged material and for documents viewed on screen in print preview mode.
projection	Yes	Yes	Intended for projected presentations, for example projectors. paged media
screen	Yes	No	Intended primarily for color computer screens.
speech	No	-	Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural'
tty	Yes	-	Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the “tty” media type.
tv	Yes	-	Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Group

continuous or paged.
visual, audio, speech, or tactile.
grid (for character grid devices), or bitmap.
interactive (for devices that allow user interaction), or static (for those that do not).
all (includes all media types)

Paged

Paged media (e.g., paper, transparencies, pages that are displayed on computer screens, etc.) differ from continuous media in that the content of the document is split into one or more discrete pages.

Management

Declaration

@media

@media print {
    /* style sheet for print goes here */
    body { font-size: 10pt }
}
@media screen {
    /* style sheet for screen goes here */
    body { font-size: 13px }
  }
@media screen, print {
    /* style sheet for screen and print goes here */
    body { line-height: 1.2 }
  }

@import

@import url("fancyfonts.css") screen;

CSS - @import rule

link

In HTML 4, the “media” attribute on the LINK element specifies the target media of an external style sheet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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>

Documentation / Reference

Media