Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Basic Syntax

Basic Syntax


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.

  • 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