Html & Html5

The World's best Software Development Study Portal


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>



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







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

#demo {









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

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



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