Media Types

A useful feature of a stylesheet is that they can change the presentation of a page depending on what device the page is being viewed on. At the moment the most commonly used media types are for screen and print simply because it means that how a site looks on the screen won’t be how it prints out, so it makes it more user friendly and save on ink, but there are a lot of other media types that can be just as useful for your site.

How to apply a media type

There are a few ways that you could apply a media type to a style set:

External Stylesheet

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

Inline style sheet

@media screen{
	#nav { font-family:Arial, Helvetica, sans-serif;}
}
@media print {
	#nav { display:none;}
}

Imported Stylesheet

<style type="text/css" media="print">
@import "print.css";
</style>

Below is a list of media types that are currently available to use

Media Type Used For
all All media type devices
aural Speech and sound synthesizers
braille Braille tactile feedback devices
embossed Paged Braille printers
handheld Small or handheld devices
print Printers
projection Projected presentations, like slides
screen Computer screens
tty Fixed-pitch character grid, like teletypes and terminals
tv Television-type devices

Have Your Say

Your email is never shared. Required fields are marked *
To add code to a comment use this [code] your code here [/code]