How To Use CSS Media Types

Some CSS Media type allow to set different style rules to different media sheets. This one is most important features of style sheets.

Media type allow you to represent different type of media represent on specific document like on screen, on paper, on print, and so forth.

Media Type

all: for all media type devices.

braille: for feedback devices.

embossed: for paged braille printers. Braille characters are small rectangular blocks called cells that contain tiny palpable bumps called raised dots.

handheld: for hand-held type devices.

print: for printed version and display print preview on the screen.

projection: for projected presentations such as projectors.

screen: for computer screens. view on browser window.

tty: for media using fixed-pitch such as teletypes.

tv: for display television devices.

How to Define Media Type

You can 3 way to define media type style sheet.

External Style Sheet

Below style sheet apply only for print preview mode.

<!DOCTYPE html>
<html>
<head>
  <title>CSS external stylesheet</title>
  <link rel="stylesheet" type="text/css" media="print" href="print_version.css" />
</head>
<body>
</body>
</html>

@import Style Sheet

@import CSS Style is another way to load external CSS file.

<!DOCTYPE html>
<html>
<head>
  <title>CSS import stylesheet</title>
  <style type="text/css" media="print">
    @import "print_version.css";
  </style>
</head>
<body>
</body>
</html>

Internal Style Sheet

@media keyword to define specific media type CSS.

<!DOCTYPE html>
<html>
<head>
  <title>CSS import stylesheet</title>
  <style type="text/css" media="print">
    @media print {
      p.bodyText {
        font-family: "georgia", times, serif;
      }
    }
  </style>
</head>
<body>
</body>
</html>