CSS Media Types

One of the most important features that you can get out of CSS is the fact that you would be able to specify and dictate how a document would appear in different forms. This means that a document created in CSS would have specs on how it would appear as a paper document, on a computer screen and even in Braille.

The CSS Media Types

There are certain CSS properties that would only be applicable for certain kinds of media. One example of that is the ‘page-break-before’. This property can only be used on paged media. There are instances however that a property can be used for various media, but in order for that to happen, certain values would have to be present. A good example is the property that changes the size of the font. This can be used for most of the available media.

Fonts would have to be bigger in a document than the one used on the computer screen. This is where CSS can really come in handy. Values can be added so that it would conform depending on the kind of media being utilized.

Specifying Media Dependencies

There are two ways that you can specify what media would be used for a certain style sheet. This is the first method:

You can specify the media type by using the the @media or @import at-rules. Here is an example code that you can use:

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

@media print {

/* style sheet for print goes here */


The second way is to set the needed medium using the document language itself. Here is an example code for that:




<TITLE>Link to a target medium</TITLE>

<LINK REL="stylesheet" TYPE="text/css"

MEDIA="print, handheld" HREF="foo.css">



<p>The body...</p>



The Recognized Types of Media

These are the names of various media that are currently recognized:

all- This means that it would be compatible with all compatible media.

braille- This is used for tactile devices that are mostly for use by the blind.

handheld- This refers to devices that are small, mobile and normally would have limited bandwidth.

print- This is used on documents that are supposed to be printed and for those that will be viewed using the “print view” mode.

projection- This is intended for being projected. The most common example of this are documents that are to be viewed on projectors.

screen- This is meant for documents to be viewed on computer screens.

speech- This is meant to be used with speech synthesizers.

tty- This is meant to be used for devices that have limited display capabilities. One good example of such a device is the teletype.

tv- This is meant for television like devices.

These are just some of the things that you need to learn when it comes to the different media types that can be used for CSS. As you can see, there are more than a few media types that you can work with when it comes to CSS.