CSS Tutorial - CSS Media Type

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


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.


The following code shows how to use Media types.

<!DOCTYPE html>
@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;

<h2>The @media Rule</h2>


Click to view the demo