CSS training institute in delhi NCR & gurgaon | IT & CSS training classes in gurgaon

As we all know that website is not meant for the desktop or laptop screen , we can access these website in any of our device like laptop, tablet and mobile means in different-different screen resolution. So by this media query property we can set different properties in different screen resolution of a particular website. And it plays a vital role in making the responsive website.

Let's understand this by the following program:-

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

#demo{

     width:300px;

      height:100px;

      background-color:red;

}

@media only screen and (max-width: 500px) {

#demo {

      width:200px;

      height:100px;

      background-color:green;

}

}

</style>

</head>

<body>

<div id="demo"> </div>

<p> See the above box as soon as you resize your browser you can see the difference </p>

</body>

</html>

Output of the Program

Resize your browser and check difference and this is the way we can set different properties in different screen resolution.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute