@media Rule - HTML CSS CSS Property

HTML CSS examples for CSS Property:media Rule

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. media Rule

Description

The @media rule defines style rules for multiple media types.

Syntax

The syntax of @media Rule is as follows: 

@media media type,... { /* media-specific rules */ }

The example below shows the @media property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS @media rule</title>
  <style type="text/css">
  @media screen{<!--  ww  w . j  a va2s. co m-->
        body {
            color: #32cd32;
      font-family: Arial, sans-serif;
            font-size: 14px;
        }
    }
    @media print {
        body {
            color: #ff6347;
      font-family: Times, serif;
            font-size: 12pt;
        }
    }
    @media screen, print {
        body {
            line-height: 1.2;
        }
    }
</style>
 </head>
 <body>
  <h1>CSS Media At-rule</h1>
 </body>
</html>

Related Tutorials