CSS media types and @media rule

CSS media types allow to personalize the elements according to media platform.

There are following media types.

  • All.
  • Print.
  • Screen.
  • Handheld.
  • TV.
  • Projection
  • Aural.
  • Braille.
  • Embossed.
  • Tty

Above all mentioned media types should be defined using @media rule.

What is @media?

@media is a rule where all these media types are defined. @media can contains a group of nested elements.

Syntax:

@media media_types
{
     elements{ property:value;}
}

Although we have included all possible media types. But only screen and print media types are working. There is a possibility that other media types may be included in the next update of CSS.

Here we will cover only two media types. Screen and print.

@media screen

Screen media type represents computer screens.

syntax:

@media screen
{
     elements{ property:value;}
}

@media print

The print media type represents print preview. Print preview can be obtained by pressing ctrl+p.

@media screen
{
     elements{ property:value;}
}

In following example, text will become orange in print preview.

Press ctrl+p. You will see the output given after this example changes its color to orange.

<html>
<head>
<style>
@media screen {
h1.printdemo{
font-size: 60px;

}
}

@media print {
h1.printdemo{
font-size: 60px;
color:orange; }
}

</style>
</head>

<body><h1 class=”printdemo”>Seowebsiteblog.com</h1></body>
</html>

Output.

Seowebsiteblog.com

Uses of @media to make the responsive webpage

@media can supports some attributes and can be written as the following syntax.

@media (attribute)
{
     elements{ property:value;}
}

@media supports the following attributes

  • min-width : Allows to set minimum width.
  • max-width: Allows to set maximum width.
  • min-height: Allows to set minimum height.
  • max-height: Allows to set maximum height
  • orientation=portrait: Allows to set the style for portrait screens.
  • orientation=landscape: Allows to set the style for landscape screens.

The following example will change the width and color of div after changing browser width.

<html>
<head>
<style>
div#demo{
height:100px;

   width:100px;
   background-color:red;
}

@media (min-width: 200px)
{

    div#demo{
height:100px;

            width:100px;
            background-color:black;
          }
}

@media (min-width: 300px)
{

       div#demo{
height:100px;

            width:200px;
            background-color:yellow;
             }
}

@media (min-width: 400px)
{

        div#demo{
height:100px;

               width:300px;
               background-color:pink;
               }
}

@media (min-width: 500px)
{

            div#demo{
height:100px;

                    width:400px;
                    background-color:brown;
                 }
}

@media (min-width: 600px)
{

            div#demo{
height:100px;

                  width:500px;
                  background-color:black;
                 }
}

</style>
</head>

<body>
<div id=”demo”></div></body>
</html>

Comments

comments