Media Types

With CSS, you can also control how your website looks on other media. Most sites only have a style sheet that controls the way the site looks on a monitor, since that is where most of the people who visit the site will see it, but there are other media that you can control also.

Aural

With Aural you can configure your site to work with speech applications. This is for those visitors who may have issues with the visual layout of a site. With the aural style sheet you can control the volume of the speech application, what is actual read on the site, and the speed that the text is read.

Braille

A braille style sheet is used for braille tactile feedback devices.

Embossed

Similar to braille, embossed controls the styles on printers that can print in braille.

Handheld

This is a media type that will become more popular as portable devices start connecting to the world wide web more often. Handheld is designed to control the look of your site on portable, monochrome, and small screen devices. These devices are similar to most smart cell phones.

Print

The print media type will allow you to control how your site looks on paper. Most sites have a print button on them, and then the site will use a different style sheet that will make the site look better on paper.

Projection

If you ever have a site that you would like to use in a presentation, then you would use the projection media type.

Screen

Screen is the most used media type. This is the type that controls how the site looks on a computer screen.

TTY

This media type is used for fixed-pitch character grid devices, like a teletype or terminals. These devices are designed to input or output one character at a time.

TV

The TV media type, is used on larger monitors or televisions.

There are a few different ways to declare what media type to use. You can create different sheets for each media type, then include them in your header like this.

<g;link rel="stylesheet" type="text/css" media="print" href="css/print_style.css">
<g;link rel="stylesheet" type="text/css" media="screen" href="css/screen_style.css">
<g;link rel="stylesheet" type="text/css" media="handheld" href="css/handheld_style.css">

Also, each media type can be declared inside a single style sheet. When needing to switch to a different media type, just use @media followed by the media type, ie @media print.

The last way to declare a media type is within the style element of the page. This works just like declaring the media type inside the style sheet, just use @media followed by the media type.