CSS Media Types

A media type is a type of visual or audio output device such as a computer screen, printer, mobile phone display panel, TV or a projector. With CSS you can define which type of media uses which set of CSS rules for display.

The reason for using media type rules is so that your webpage can be output to as many different types of media as possible and still remaining visually usable. Since it is virtually impossible to cater for every different type of media and device currently in the world, a good general rule is to cater for 95-99 percent of your users.

If people frequently print pages of your website, it is logical to make sure that pages of your website print well. Similarly, if many people use mobile phone browsers to visit your website then lots of development and testing is needed to ensure the website is usable with a mobile phone browser. Enabling this media flexibility is the purpose of CSS media types.

There are a few media types that you can apply to CSS. A list of them is provided in the table below:

Media Type Description

all - Used for all devices (default value if media type is not set)

aural - Used for speech and sound synthesizers

braille - Used for braille tactile feedback devices

embossed - Used for paged braille printers

handheld - Used for small or handheld devices

print - Printers and print preview

projection - Projected presentations, e.g. slideshow presentations

screen - Used for computer (desktop, laptop) screens

tty - Used for media using a fixed-pitch character grid, like teletypes and terminals

tv - Used for television-type devices

There are at least 2 ways of setting the media rule for different media types. One way is to use the @media rule in the CSS code, another is to use the media attribute of the link tag that loads the CSS files.

An example of how to use the @media rule is shown below:

<style type=”text/css”>

h1 { font-size: 32px; font-family: Arial; }

@media print {

h1 { font-size: 22px; font-family: Times, serif; }

}

</style>

You can use this method either with CSS in the HTML code or in a CSS file.

An example of using the media attribute is shown below:

<link rel="stylesheet" type="text/css" href="css/core.css" media="screen">

<link rel="stylesheet" type="text/css" href="css/print.css" media="print, handheld">

References:

W3Schools - CSS Media Types

http://www.w3schools.com/css/css_mediatypes.asp

JavaScript Kit - CSS Media types and printer friendly pages

http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

HowToCrate - Media Types

http://www.howtocreate.co.uk/tutorials/css/mediatypes