Media Queries Basics

Part of the Styling with CSS section of Coddy's HTML journey — lesson 65 of 76.

A media query in CSS allows a website to adapt to different screen sizes by applying styles based on device width, height, or other properties.

Basic Syntax for Media Queries:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition: The rule that triggers the styles (e.g., max-width: 600px).
selector: The HTML element(s) to style.

property: The CSS property to set (e.g., width, font-size).
value: The value assigned to the property, which changes based on the media query condition.

In a media query, the condition can be based on various factors like screen size, resolution, and more. Some common conditions include:

max-width: Limits the styles to screens with a maximum width (e.g., max-width: 600px).
min-width: Applies styles to screens with a minimum width (e.g., min-width: 768px).

max-height: Limits styles to screens with a maximum height (e.g., max-height: 400px).
min-height: Applies styles to screens with a minimum height (e.g., min-height: 500px).

These conditions help you control how your website looks on different devices and orientations.

Example:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

This changes the background color to lightblue when the screen width is 600px or smaller. For screens between 601px and 1024px, the background color will be lightgreen.

Challenge

Easy

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and a <div>. Your task is to add media queries to make the page responsive. Follow the steps below:

Add a @media query for screens with a max width of 600px:
- Set the background color of the body to light blue.
- Set the font size of the heading (<h1>) to 5vw (5% of the viewport width).
Add a @media query for screens with a min width of 601px and max width of 1024px:
- Set the background color of the body to light green.
- Set the font size of the heading (<h1>) to 3vw (3% of the viewport width).

Resize the browser window to see how the media queries adjust the layout dynamically.

Cheat sheet

A media query in CSS allows a website to adapt to different screen sizes by applying styles based on device width, height, or other properties.

Basic syntax:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

Common conditions:

max-width: Limits styles to screens with maximum width
min-width: Applies styles to screens with minimum width
max-height: Limits styles to screens with maximum height
min-height: Applies styles to screens with minimum height

Example:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}
}

Try it yourself

<html>
<head>
    <title>Media Queries Basics</title>
    <!--Write your code here-->
    <style>
        
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>