CSS media property

HTML supports different stylesheets or CSS properties for an HTML document depending upon the different media type.

For example, we may have two different stylesheets for an HTML document. One is for print media and the other one is for screen media.

Example

<link rel="stylesheet" media="screen" href="screenMedia.css">
<link rel="stylesheet" media="print" href="printMedia.css">

The following CSS properties apply to screen and print media only.

Example

<style>
@media screen,print{
div{ 
 width:100px;
 height:100px;
 background-color:red;	
}
}
</style>
Try </>

Syntax of a media query

The media query returns true or false value. The media query consists of the media type and the relevant expressions to check the validity of media features.

Example

<style>
@media type and features { Properties }
@media screen and (max-width:400px){ div{background-color:red; }}
@media print and (max-width:500px){ div{color:black;} }
</style>

Try </>

If the size of screen media is less than 400px, it returns true otherwise false. And if the size of print media is less than 500px, it returns true otherwise false.

media keywords

There are certain keywords that need to be discussed here.

AND

and keyword is used to add more than one features in media query.

Example

<style>
p{
 color:blue;
}
@media screen and (max-width:300px) { 
p{
 color:red;
}
}
</style>

Try </>

The above example represents that the color of the text should be red for screen that has width less than 300p. The color of text for the other media will be blue.

NOT

not keyword negates the device type and features of the device.

Example

<style>
@media not screen{ 
body{
 background-color:lightblue;
}
}
</style>

Try </>

The above example represents that the background-color of <body> element will be lightblue except screen media.

The media query returns true or false. If the media type of media query matches the device being used, it returns true otherwise false.

Features of a media type

The media query may also include the features of a specific media with the type of media in a media query. See the example given below to understand the feature of a media.

Example

<style>
@media screen and (max-width:400px){
 div{background-color:gray;}
}
@media print and (max-width:900px){
 div{color:white;} 
}
</style>

Try </>

In the above example, there are two types of a media. And the feature is the min-width. It says that the size of screen should be at least 300px. And the size of print media should be at least 300px and 900px respecively.

All of the features of media have been given below.

height

We add break points for the devices that vary in size. The size includes the width and height of the device. Here we discuss the height of device.

We can define different CSS properties for defices having different height. See the following example.

Example

<style>
div{
 background-color:green;
}
@media screen and (max-height:400px){
 div{background-color:gray;}
}
</style>

Try </>

The above query represents that the background-color of <div> elements will be gray for the devices that have height less than 300px.

And the background-color of <div> elements will be green for the devices that have height more than 300px.

Now we consider min-height.

Example

<style>
@media screen and (min-height:300px){
 div{background-color:light;}
}
</style>

Try </>

It means that the background-color of <div> elements will be gray for the devices that have height more than 300px.

width

We can define different CSS properties for devices having different width. See the following example.

Example

<style>
h2{
 font-size:22px;
}
@media screen and (max-width:300px){
h2{
 font-size:20px;
}
}
</style>

Try </>

The above example represents that font-size will be 20px for devices having width less than 300px.