CSS Tutorial - CSS Media Type

The @media CSS at-rule associates a set of nested statements.

Syntax

The following code shows how to use CSS @media rule.

@media <media-query> { 
   /* media-specific rules */ 
}

A media-query is composed of a media type and/or a number of media features.

Media types

all - Suitable for all devices.
print - for viewing on screen in print preview mode.
screen - for color computer screens.
speech - for speech synthesizers.

Example

The following code shows how to use Media types.

<!DOCTYPE html>
<html>
<head>
<style>
@media screen {<!--from w  w  w .j  a va2 s.c  o  m-->
    h2 {
        font-family: verdana,sans-serif;
        font-size: 14px;
    }
}

@media print {
    h2 {
        font-size: 20px;
        color: red;
    }
}
</style>
</head>
<body>

<h2>The @media Rule</h2>

</body>
</html>

Click to view the demo