×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS media query


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