Bummer!

This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Silver trial
to watch this video

Sign up for Treehouse
Basic Syntax

Basic Syntax

7:56

In this video, you'll implement a media query and learn some of the basic syntax. This will help provide some context for future concepts.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 0:07

    [CSS Media Queries - Basic Syntax with Nick Pettit]

  • 0:13

    In the previous video, we introduced the idea of media queries,

  • 0:17

    but now it's time to take a look at the syntax.

  • 0:19

    Let's dive in.

  • 0:20

    So, as you can see here, we have a basic page.

  • 0:23

    This was created in the HTML and CSS chapter; it's kind of a final project for CSS.

  • 0:29

    So ideally, we would want people to view this website

  • 0:32

    just how it is on a nice, wide screen, but if someone is looking at this website

  • 0:38

    on a much smaller netbook screen or some other kind of mobile computing device

  • 0:43

    that isn't quite as wide, then we'll probably want to adjust how this content is displayed.

  • 0:49

    We might want to do things like rearrange these columns here,

  • 0:53

    maybe change some font sizes--particularly in the header,

  • 0:57

    move page elements around, and things like that.

  • 1:00

    Using media queries, we don't need any complex JavaScript to do that.

  • 1:04

    We can simply use pure CSS.

  • 1:07

    Now would be a good time to mention, however,

  • 1:09

    that media queries are indeed a feature of CSS3,

  • 1:13

    so that means they don't work in all browsers just yet.

  • 1:17

    Media queries do work in Opera, Firefox, Safari, and Chrome,

  • 1:22

    even if you go back a few versions.

  • 1:24

    Internet Explorer 9 will support media queries; however, version 8 and earlier

  • 1:30

    of Internet Explorer do not.

  • 1:33

    So now that we have that out of the way,

  • 1:35

    let's go ahead and try some real media queries.

  • 1:38

    There are a couple of ways we can do this.

  • 1:41

    One of the more common ways, though, is to break out your more specific styling

  • 1:45

    into a separate style sheet and then link it in based on some conditions.

  • 1:50

    So let's say that if the viewing area of our web page here is less than 800 pixels wide,

  • 1:57

    we should tweak the existing styling with another style sheet.

  • 2:01

    Now, to do that, we're going to need to switch over to our code,

  • 2:04

    and in the markup here, we're going to add another link tag,

  • 2:09

    so I'll just copy and paste that and put that right there,

  • 2:13

    and we're going to add and change a few things.

  • 2:16

    So first, we need to add a media attribute, and inside of here, I'm going to say

  • 2:23

    screen and (max-width:) and we want that to be 800 pixels,

  • 2:32

    and then we also need to change the style sheet here.

  • 2:35

    Instead of style.css, we're going to link to another style sheet called thin.css.

  • 2:42

    So we're using this media attribute,

  • 2:45

    and then we're saying that we want to use screen,

  • 2:49

    and then we're using the Boolean operator \"and\"

  • 2:53

    to connect this to the other part of the expression.

  • 2:57

    Here we're creating an expression that evaluates to either true or false.

  • 3:03

    If you've ever done any programming, this should seem very basic to you,

  • 3:06

    but if you're not a programmer at all,

  • 3:09

    basically, we're just saying that this style sheet

  • 3:13

    should only be included if media is equal to both screen and the maximum width

  • 3:21

    of the browser rendering area is 800 pixels.

  • 3:25

    There are a few other Boolean operators

  • 3:28

    and we'll go over those in an upcoming video, but right now,

  • 3:31

    we just want to get the basic idea.

  • 3:33

    Now, this second part here where it says max width 800px

  • 3:38

    is what's called a media feature.

  • 3:41

    There are many other media features of media queries,

  • 3:45

    and width is just one of them.

  • 3:48

    The prefix \"max\" is actually a modifier to the media feature \"width,\"

  • 3:54

    and we'll talk more about media features in an upcoming video.

  • 3:57

    For now, all you need to know is that this part of the expression evaluates to true,

  • 4:03

    only when the browser window minus chrome and scrollbars

  • 4:06

    is less than or equal to 800 pixels.

  • 4:10

    Now, I've already created this style sheet called thin.css that we're linking in.

  • 4:17

    So let's switch over to that,

  • 4:19

    and just to make sure that our media query is actually working,

  • 4:24

    let's try out a really trivial example

  • 4:26

    that would be very obvious and catch our attention,

  • 4:29

    like changing the background color of the site body.

  • 4:33

    So I'm just going to select our body and let's change the background

  • 4:37

    to something like green, and when we switch back to the browser and refresh,

  • 4:44

    we can go ahead and actually make this browser window smaller

  • 4:49

    and when it hits 800 pixels, you can see that the whole background changes to green.

  • 4:55

    I'm just going to go ahead and reset this browser window--there we go.

  • 4:59

    And lets switch back to the code.

  • 5:02

    Now, remember that the order that you include the style sheets is very important.

  • 5:08

    Styles are included from the top of the page to the bottom,

  • 5:13

    so styles at the bottom are actually capable of overriding styles that are at the top,

  • 5:19

    so in this case, we're overriding any kind of body background style

  • 5:23

    that is in style.css.

  • 5:26

    Now, I mentioned earlier that there are a couple of ways

  • 5:30

    of using media queries in your pages.

  • 5:32

    So let's go ahead and take a look

  • 5:34

    at another way we could go ahead and do this.

  • 5:36

    So I'm just going to remove our linked-in style sheet there,

  • 5:42

    and let's go ahead and open up style.css here.

  • 5:47

    So rather than link in a style sheet, we're going to put our media query

  • 5:51

    directly in our main style sheet here, so I'm just going to skip down past the body here,

  • 5:58

    and I'm going to say @media screen and (max-width: 800px)

  • 6:09

    I'm going to put some curly braces, and inside of there, I'm going to select our body

  • 6:14

    and put some more curly braces and put the property background

  • 6:20

    and the value green.

  • 6:22

    So when I save this and switch back to the browser and refresh,

  • 6:27

    you can see that this works exactly the same as before,

  • 6:32

    and that's what we want.

  • 6:34

    Our media query can be directly in the style sheet or it can be in the media attribute

  • 6:40

    of a link tag like we had before.

  • 6:43

    So before we move on to other media features,

  • 6:46

    let's go ahead and take a look at this alternate syntax that we created here.

  • 6:51

    Basically, we're saying the same thing as we did in the media attribute earlier--

  • 6:57

    we're saying that if media is equal to both screen

  • 7:01

    and the maximum width of the browser is 800 pixels,

  • 7:05

    then include the following styling.

  • 7:08

    If you're not familiar with programming, please know that there are actually 2 sets

  • 7:12

    of curly braces here, which is not typical in CSS.

  • 7:16

    The outer curly braces are for the media query,

  • 7:21

    and this set of inner curly braces is just for this particular selector,

  • 7:26

    which in this case is body.

  • 7:29

    Now, if we wanted to, we could add other selectors with other CSS properties

  • 7:34

    inside of our media query here, and those would go after or before our body selector.

  • 7:40

    Now that we have a little bit of practical experience with media queries,

  • 7:44

    learning more about them should be easier.

  • 7:46

    In the next video, we'll take a look at some specific features of media queries.

  • 7:51

    [?mellow guitar music?]

  • 7:53

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.