These days one of the most important responsibilities we have as web

designers or front-end developers is being able to

define how content is presented on different devices.

Fortunately, CSS media queries have given us a convenient way of

targeting different devices, resolutions, browser dimensions, and more.

So, we're able to tailor our content to a wide range of devices without having to

change any of the actual content because it's all controlled within the CSS.

With just a few media queries, we're able to enhance the browsing experience of

websites on multiple devices and viewport sizes, because our content can respond or

adapt to the device that's displaying it.

Now there are a few ways we can include media queries in our pages but

we're going to use the most common method which is adding the media

query rules directly in our CSS.

So, the first thing I'm going to do is copy this top comment,

then scroll down to the bottom of our style sheet, and

let's add some space right below the float clearfix and I'll paste comment,

and then I'm going to change it so it reads media queries.

So a media query is simply a style block containing one or various conditions.

And, if those conditions are true, the media query takes effect.

If they're false, the browser or device ignores them.

So, let's take a look at what makes up a media query.

To create our first media query, we'll type @ media,

followed by a set of parentheses, then a set of curly braces.

So the at media rule is what specifies the media type we want to target.

And there are a few recognized media types we can use so

that we're able to create CSS and serve it specifically to any of those media types.

So, for example, the all media type targets all devices.

There's also a media type for Print, Green, even one for Speech.

So we want our media queries to affect all devices and

computer screens, so, we'll want to go with the all media type.

So, right after the at media statement, let's type All.

Now All is the default media type for media queries.

So we can actually omit it from our media statement if we want to.

So remember, if you don't define a media type, the All type will be implied.

So now, we will need to write an expression inside the parenthesis that

will check for those true or false conditions I mentioned earlier.

So first, we need to define the media feature we are testing for.

Some of the media features we can use are width, height.

We can also check for things like max-width,

max-height, also a device's orientation and a few other features.

So we're going to use the max-width media feature to check for

the max-width of the browser's viewport.

Then, we're gonna follow that with a colon and

define a pixel based value of 960 pixels.

But we can also make this a percentage value, an M value or any linked unit.

Now, one important thing to keep in mind,

is that we don't need to include a semi colon after the value.

Otherwise, the entire media query is ignored.

I know it's a common mistake to make because we're so

used to adding a semicolon after every CSS declaration.

So, make sure to keep those semi-colons out of the media feature expressions.

So this expression will query the max-width of the display area,

which in our case is the browser's E-port.

So with this media query in place, we can create subtle or

drastic changes in the layout or appearance of

our website whenever the browsers viewport is at or below 960 pixels.

And we can do that with regular CSS rules.

So, inside the media query Rule, let's target the body of the page

using the body type selector that inside the body rule.

Let's add a background property and

set the background value to the color royal blue [SOUND].

And right below the body rule,

let's target all paragraphs on the page with the P selector.

Let's give it a color property and set the color value to white.

So let's save our style sheet and refresh the browser.

So now we can see how those colors are applied to the body and

paragraphs whenever the browser width is resized.

So right when the view port hits that 960 pixel width,

the colors change and they remain that way as the browser gets narrower.

But once we're at anything wider than 961 pixels,

they change back to their original colors.

So let's go back to our style sheet and add another media query.

So right beneath the media query we just wrote,

let's create a new one by writing @media.

And once again, we're going to use the max-width media feature but

this time we're gonna set the value to 480 pixels.

[BLANK_AUDIO]

So inside the new media query rule, let's once again target body element.

And inside the body rule, we'll add a background property.

And this time, lets set the background to the color value dark red.

Okay.

Now, when we save our style sheet and refresh browser, notice how the background

color still turns blue and the paragraph colors change to white at 960 pixels.

But once the view port is equal to or

below 480 pixels, the background color turns dark red.

And notice how the paragraph's font colors still remain white

even though we didn't specify it In the new media query.

Well, the color values still apply because the conditions we've

set in the top media query are still true.

The view port width is still less than 960 pixels.

So unless we override it with a new property,

like we did here with background, the text color will remain white.

But if we want to define certain styles only at a certain range of viewport sizes,

well, what's great about media queries is that we're able to add or

combine expressions if we need to get more specific about a device or

a viewport range.

So let's add one more media query in our style sheet by typing @media.

And this time, we're gonna use the min width media feature and

the value is going to be 481 pixels.

Now, after the set of parenthesis we're gonna type the word and

followed by a new set of parentheses.

And in this expression, we're going to use the max width media feature and

set the value to 700 pixels.

So in this media query the and

operator is combining these two expressions between the parentheses.

So, when the device or view port is between the range of 481 pixels and

700 pixels, it's going to display the styles we're about to write.

So inside our new media query rule let's once again target the body

element with the body selector, and we're going to add a background property, and

this time we're going to set the background to the color sea green, and

let's remove the p rule from our first media query.

I'll simply select and cut it out of the media query.

Then we're gonna use it in our new media query,

so right below the body rule I'll paste in the new media query.

Alright,. .

So, let's save our style sheet and go back to the browser and refresh the page.

So now, when we resize our browser, notice how the green background and

white text color are only applied between the max width of 700 pixels and

minimum width of 481 pixels.

So when the view port is between 481 pixels and 700 pixels.

Okay. So,

now that we have the Media Query basics down,

we'll see how we can use this logic to enhance our final layout.