How to use Media Query In CSS

<html>

<head>

<title>Media Query</title>

 

    <style>

        

        #header{                                   /* This is a Default CSS */

            width:1000px;

            height: 200px;

            padding:20px;

            color:white;

            background-color: gray;

 

        }

 

        @media screen and (max-width: 600px){                  /* This is Media Query CSS */

 

            #header{

 

                width:200px;

                height: 50px;

                background-color: red;

                color:white;

            }

 

            


 

        }

 

    </style>

 

</head>

<body>

 

    <div id = "header">This is my Responsive div</div> 

 

</body>

</html>



Explore Our YouTube Tutorials

Dive into our YouTube tutorials to access high-quality learning content on web development, design, and technology. Each video is crafted to provide clear guidance and hands-on knowledge for skill development.

 


Upgrade Your Skills with Our Courses

Choose the right course and start building your future with practical skills.

Web Development

Learn HTML, CSS, JavaScript, and PHP to build modern, responsive websites and real-world projects.

Enroll Now See Full Details

Breadboard Learning

Understand electronics basics with hands-on breadboard projects and circuit building techniques.

Enroll Now See Full Details

AI Training

Step into AI with real-world applications, automation tools, and smart development techniques.

Enroll Now See Full Details