CSS Media Type


The media type allows you to specify how the file will be presented in different media. The file can be displayed on the screen in different ways, on paper, or in an auditory browser, etc. 


Media Type

Some CSS properties only design certain media. For example, the voice-family attribute is designed for auditory user agents. Some other attributes can be used for different media types. 

For example, the font-size property can be used for screens and printed media, but has different values. Documents on the screen and paper are different and usually require a larger font. The sans-serif font is more suitable for reading on the screen, while the serif font is easier to read on paper.


@media Rules

The @media rule allows different styles to be set for different media in the same style sheet.

The following example tells us that a 14-pixel Arial font style is displayed on the browser screen. But if the page is printed, it will be a Times font of 10 pixels. Please note that the font-weight is set in bold on the screen and on the paper:

Example

<style>

@media screen

{

     p.test {font-family:arial,sans-serif;font-size:14px;}

}

@media print

{

     p.test {font-family:times,serif;font-size:10px;}

}

@media screen,print

{

     p.test {font-weight:bold;}

}

</style>

<body>

    <p class="test">Lots of tutorials on TutorialFish.com</p>

</body>

 Try It! 

Try it yourself! If you are using Mozilla / Firefox or IE5+ to print this page, you will see that the media type will be displayed in another font with a smaller font size than other text.


Other Media Types

Note: The media type name is not case sensitive.

Media TypeDescription
allUsed for all media devices.
auralUsed in speech and audio synthesizers.
brailleUsed for braille tactile feedback devices for blind people.
embossedBraille printers used by blind people for sorting pages.
handheldUsed for small handheld devices.
printUsed for printers.
projectionUsed for program presentation, such as slides.
screenUsed for computer monitors.
ttyUsed for media that use fixed-density letter grids, such as teletypewriters and terminals.
tvUsed for TV-type equipment.