True or False: Media queries allow you to write CSS that is only applied at certain window sizes.

Take a look at the following CSS:

What is the best description of what this media query says?

The practice of starting with CSS for the smallest possible size and adding complexity with media queries for larger viewports is called what?

CSS Based on Page Width

Write a media query that sets the background color of the body to be #ffe08a on screens wider than 600px.

Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.

Multiple Scales

Write the media queries needed to set the type size of h1 elements to be:

  1. 2.5rem on screens wider than 400px
  2. 3rem on screens wider than 600px.

Be sure to write it in that order.

Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.

Multiple Selectors

Now we have a paragraph as well as a heading. Let's make it responsive as well.

Write the CSS to set the type size of the paragraph to be 1.5rem on screens wider than 600px.

Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.

Mobile-first Styling

Change the color of all paragraphs to be #448568 when the viewport is wider than 400px. It should stay red at sizes smaller than that, and it should use the same typefaces at all sizes.

Hint: You can test your media queries by resizing the preview area by dragging the lower-right corner.