CSS - Media Type (Screen, Paper, ) - Medium

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

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

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





Discover More
CSS - (Implementation|Processing Model|Rendering)

How user agents may implements CSS. A user agent processes a source by going through the following steps: Parse the source document and create a document tree (CSSOM) Identify the target media...
Boxdim
CSS - (Length) Unit

CSS The unit in CSS is the second element of a length that defines the type of the length number. Example: px, em, etc ... The recommended unit scales are: Screen: rem, em, px, % Print:...
CSS - Canvas

For all media, the term canvas describes “the space where the formatting structure is rendered.” The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - Media Features

media feature is the feature of a media that can be used in a media query in order to target the styling rule to a specific device. width (the total width of the page in CSS pixels (logical pixel))...
CSS - Overflow

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box. The overflow property...
CSS - Page

A page is (visual) media type. A page generally impose width and height constraints.
CSS - Print

Print is a media type Intended for paged material and for documents viewed on screen in print preview mode. When creating stylesheet for this media, the point unit is generally used for length definition...
CSS - Property

CSS defines a finite set of parameters, called properties, that defines the rendering of a document. Properties are written in a css rule after the element selection definition. Properties are attached...
Boxdim
CSS - Relative Sizing (Length)

Relative Sizing is when you are using a length units that is relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a...



Share this page:
Follow us:
Task Runner