Media Types

People have many options to consume content, read it on their screen, mobile device, printed, emailed as a PDF, on a television, braille devices, and speech synthesized.

You want to create your content to be accessible from any device. CSS gives you the flexibility to customize your styles for different media types.

How would you use media types?

The layout of your content will be different on different devices.

There are 9 Media Types

• all - Suitable for all devices.
• braille - Braille tactile feedback devices.
• embossed - For paged braille printers.
• handheld - Think small screen, mobile devices, limited bandwidth.
• print - Paged material, or PDF.
• projection - Projected presentations, for example projectors.
• screen - Computer screens
• speech - Speech synthesizers. 
• tty - Teletypes, terminals, or portable devices with limited display capabilities. You must use pixel units with the "tty" media type.
• tv - Televisions are low resolution, color, limited-scrollability screens, with sound available.

Note: Media type names are case-insensitive, so make sure you don't capitalize.

The @media Rule 

Use the @media to target a particular media type.

For example, don't display the navigation for paged media (print/pdf).

@media print {
   #nav {
     display:none;
}

You can target multiple media types using a comma "," .

@media print, braille {
   #nav {
     display:none;
}