CSS Media Types


The @media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.


@media Rule

The @media rule allows different style rules for different media in the same style sheet.

Example

<style type="text/css">
        @media print  {
          body {
                 font-size:20px;
                 background-color:#f1f1f1;
            }
          p {
                 font-size:10px;
            }
          }                 
          
          @media screen  {
          body {
                 font-size:10px;
                 background-color:#ccc;
            }
          }                  
  </style>

All Media Types

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
handheld Used for small or handheld devices
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

Share this article on