CSS - Style Sheet Media Types

By using the media type rules ( @media ) we can present our web page with a different look in different devices such as screen, print, mobile phone, tablet, etc.

There are different media types defined in the CSS-2 specifications.

Media Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Used for television-type devices

We can define media types in different ways

1. External Style Sheet associated with single media type.

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

2. External Style Sheet associated with multiple media types.

<link rel="stylesheet" type="text/css" href="print.css" media="print,handheld" />

3. Imported Stylesheets

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

4. Internal Style Sheet associated with single media type.

<style type="text/css" media="print">
h1
{
font-size:16px;
color:Green;
}
</style>

5. Internal Style Sheet associated with multiple media types.

<style type="text/css" media="print,handheld">
h1
{
font-size:16px;
color:Green;
}
</style>

6. Inline style sheets, with the @media rule

<style type="text/css">
@media print
{
h1
{
font-size:16px;
color:Black;
}
}
@media screen
{
h1
{
font-size:18px;
color:Green;
}
}
@media screen, print
{
h1
{
font-size:1.5;
color:Blue;
}
}
</style>