CSS Layout Tutorial - 22 - Media queries Part 3 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in the last few videos we took a look at
media queries basically we added all
these rules in our CSS stylesheet and
that is useful of course if you want to
handle certain different resolutions but
you can also use entire new style sheets
with media queries and so that's what
we're going to do in this video so let's
go ahead and do that now of course we
know that we add style sheets in the
head element we talked about that a long
long time ago and that's where you do it
basically you can add a media query for
any different type of style sheet you
can use now you might ask well why would
I use a style sheet well if you had a
lot of changes it's really not feasible
to put a bunch of media queries in your
existing style sheet so if you have a
lot of changes that you're going to make
it's probably better to use an entire
new style sheet and again you can
reference it with media queries so let's
go ahead and we're just going to copy
and paste this line right here and we're
just going to paste it right below and
now we're going to do is go ahead and
tweak this code where we can add a media
query so we type in right here media and
then we just put in the resolution that
we want and in this case let's go ahead
and we'll play with that 400 pixel width
again so we're going to go ahead and use
the max width property it's very similar
by the way as you can see so we're going
to type in max width and again we're
going to use a new style sheet when we
hit 400 pixels so everything is pretty
much the same it's very similar the only
difference is you're using a separate
style sheet and then we just close it
out and of course what the href
attribute is where we specify the style
sheet of course we're not going to
specify our existing style sheet we're
going to specify a new style sheet and
we're just going to call this style 2
dot CSS that's it so that's really all
you have to do now we don't need any of
these media queries since we're creating
new style sheets we're going to go ahead
and get rid of the media queries that we
specified in our first style sheet so
let's go ahead and get rid of those and
we'll save this good so now what I want
you to do is go ahead and close out of
our first style sheet close that out and
then what I want you to do now is go
ahead and create a second style sheet
called style tube dot CSS this name
right here and then what I
want you to do is go ahead and open that
up and I put all this code in the
description of this video there's a
paste link for it so go ahead and get
that and then place all that code in
your style to dot CSS and you can take a
look I've tweaked some things here
basically I've made the container now
for 100 pixels so it will exactly be the
length of a device that is 400 pixels
wide
I've also tweaked the header you can see
that's 396 pixels wide you will remember
that we have to account for the border
so I subtracted 4 pixels from the
overall width and that gives us 396
pixels and then I set the sidebar and
NAB to none so we don't even want to
display that on this small device we
want to get rid of those so I set those
to display:none and of course we did
that in the last video and we're going
to do it again I think we just did it
for the sidebar as I recall but we're
going to do it for the nav too so we
basically set those to none and then I
tweaked the main element as well and I
made that 396 pixels wide as well so
this is an entirely new stylesheet so
let's go ahead and save our site 1 dot
HTML I can't remember if we did or not
and then let's go ahead and open up our
web page and see if it works
ok so there it is and of course now
we're using the first CSS stylesheet
right the style dot CSS let's go ahead
and minimize this now and see if this
works and it did both our site and nav
elements are gone and this is only now
400 pixels wide it perfectly fits so
pretty cool now I want to show you one
aspect of this when you're using
multiple style sheets and in particular
when one style sheet is for the main
page and another style sheet you're
using media queries I want to show you
something really quick so let's go ahead
and minimize this and then what I'm
going to do is go ahead and get rid of
this nav here we're just going to go
ahead and eliminate that and I'm going
to go ahead and save this and then let's
go ahead and refresh our page and I want
you to see what happens here and we're
going to minimize this and there's the
nav bar now you're wondering well wait a
minute we have a separate style sheet
here why did the nav bar display because
there isn't even an entry here in our
CSS style sheet well the reason is it
got picked up in the first style sheet
the style dot CSS so just keep that in
mind that this style sheet still gets
ready
and we'll still load definitions if
there's nothing specified in our style
to remember media queries is more like
an override it just overrides the
existing stylesheet but if you don't put
a display:none here for a particular
element the first stylesheet will come
into play that's the way it works
provided there's an entry over here in
the style dot CSS which of course there
is for this navbar so just keep that in
mind about how these overrides work so
let's go ahead and we'll set this back
and we'll save this let's refresh our
page and it should be gone and it is
okay that's going to do it for this
video I will see you guys in the next
video thank you