Latest web development tutorials

CSS media types

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

media type

Some CSS properties are only designed some of the media. Such as "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, "font-size" property can be used to screen and print media, but have different values. Screen and on paper files differ, usually require a larger font, sans - serif font is more suitable for reading on screen, while serif fonts are easier to read on paper.

@media rule

@media rule allows the same style sheets for different media set different styles.

In the following example tells us to display a 14 pixels Verdana font style on the browser screen. However, if the page printed will be 10 pixels Times font. Please note, font-weight paper and on the screen setting in bold:

@media screen
	p.test {font-family:verdana,sans-serif;font-size:14px;}
@media print
	p.test {font-family:times,serif;font-size:10px;}
@media screen,print
	p.test {font-weight:bold;}


You can try it yourself and see! If you are using Mozilla / Firefox or IE5 + print this page, you'll see, "Media Types" will use another display than other Text size small point font.

Other media types

Note: The media type names are not case sensitive.

media type description
all For all media devices.
aural For speech and audio synthesizer.
braille With tactile feedback device for the blind Braille.
embossed Blind for paged Braille printers.
handheld For handheld devices small.
print For a printer.
projection Program for display, such as slides.
screen For computer monitors.
tty For using a fixed grid of letters density media, such as teletypes and terminals.
tv For TV type of device.