Now before we jump into a code example I'd like to show you a very common approach
how you structure media queries within your style sheet.
What usually happens is you have a few of these media queries, but
you almost always start with some base styles.
Base styles will apply across the board no matter what screen size
you actually are viewing the website on.
Then you go ahead and start targeting a particular screen size
by either changing some of the properties of the base styles or
adding something else to them or maybe taking something away.
Now an important point to point out,
and especially when you're using widths of screen sizes of the devices
is that you have to be very careful not to overlap range boundaries.
So in this example you will notice that the first query has the minimum width
of 1200 pixels and the second query is coming up it's a range again.
And it comes up, up to max width of 1199 pixels,
if I were to say 1200 pixels it will mean there always inclusive.
It will mean that both sets of styles will apply and
most probably things will be pretty messy and very hard to maintain.
So it's important when you structure these media queries that you have very clean,
separate boundaries.
In part two of this lecture, we're going to jump into the code editor and
see these concepts in action.