28 - CSS Media

Media feature of CSS helps us render a piece of information (specifically speaking “layout”) differently according to the media types. This is one of the important features of CSS. It is very crucial at this point of time when each day you are introduced to a new media type. So, it is a good idea to specify different layouts for different media like mobile phone, tablet, and print media.

The layout for all the media types cannot be the same. So, the design depends on the device (or medium)

There are two ways of doing this. One is to use @media and the other @import.

This chapter focuses on the widely used @media rule.

The same style sheet can have the style information for all the different types of devices.

General Syntax

      @media target_medium{

          /* style rules for target medium */

      }

The target medium may be only one medium or different types of media separated by commas. Like this:

      @media target_medium1,target_medium2{

         /* style rules for target medium */

      }

Using @media increases the responsiveness of the design across different sizes of viewport from small to large or anywhere in between

The target media or Types of media

Media Type

Description

all

Suits all devices

braille

Used on Braille tactile feedback devices

Embossed

This type is for paged Braille printers

handheld

Intended for small handheld devices. Small Viewport.

print

This type is intended for printed material and for documents that are previewed in print mode

speech

used for speech synthesizers. It is also called “aural” in CSS2

Projection

used for presentations on projectors like styling for slides

screen

Used for color screens

tv

used for television like low resolution devices

tty

used for devices with limited display capabilities like portable devices

Note: Media types are case-insensitive, “print” is same as “PRINT”

An Example:

<html>
   <head>
      <style>
         @media print{
         body{font-size:16pt; color: Blue;}
         }
         @media screen{
         body{font-size:12pt; color: Green;}
         }
      </style>
   </head>
   <body>
      The @Media Rule makes me appear on screen in Green and Blue in Print Preview
   </body>
</html>

Output in Normal Mode

    

Output in Print preview mode

        

 

 

 

Like us on Facebook