Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Complex Media Queries

4:00 with Anwar Montasir

Looking one more time at CSS Tricks’s diagram called anatomy of a media query, you might notice that we skipped one portion of the diagram. CSS Media Queries accept logical operators that allow you to combine multiple characteristics into one query. For example, what if we wanted to set a minimum and maximum viewport width for applying a CSS rule?

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Looking one more time at CSS Tricks' diagram called "Anatomy of a Media Query," 0:01
    you might notice that we skipped one portion of the diagram. 0:08
    CSS media queries accept logical operators that allow you to 0:13
    combine multiple characteristics into one query. 0:17
    For example, what if we wanted to set a minimum and 0:23
    maximum viewport width for applying a CSS rule? 0:27
    You might want an element 0:32
    to be styled a certain way 0:38
    only when the viewport 0:44
    is between 600 and 0:49
    800 pixels for example. 0:54
    We can add as many conditions as we want separated by the and operator. 1:13
    In this case, we're turning our header text yellow. 1:20
    But only when the screen is at least 600 pixels wide, but no wider than 800 pixels. 1:23
    The logical operator called or is used less frequently. 1:33
    In this case, the CSS rule will be applied when either of the two conditions are met. 1:38
    And you'll notice we don't literally type the word or 1:45
    we just separate our desired media features using commas. 1:49
    Let's create a media query for device screens 1:55
    that changes the background color of our sections under two conditions. 2:01
    Either, the viewpoint width is at least 900 pixels, 2:06
    Or when the screen is in portrait orientation. 2:14
    Now when my viewport is wider than 900 pixels, 2:28
    the background of my sections is 2:35
    cornsilk no matter what, but 2:40
    on a narrower viewport it depends. 2:44
    If the height of the viewport is taller than the width, 2:51
    that's portrait orientation, so we see cornsilk. 2:55
    If the width of the viewport is wider than the height, that's landscape orientation. 2:59
    So we see azure. 3:06
    Great job making it this far. 3:08
    The tools you've learned here will allow you to exercise much more control 3:12
    over your CSS layout. 3:17
    And not just on the desktop. 3:19
    You've been introduced to CSS media queries. 3:21
    And you can use that knowledge to target devices by type, screen width, 3:24
    and even orientation. 3:29
    As you practice what we've learned here, keep the notes and 3:32
    resources we've covered handy. 3:35
    Mastering CSS layout involves learning a lot of properties and values. 3:38
    But the one thing you needn't worry about is memorizing it all. 3:44
    Keep on coding and experimenting, but also reading. 3:49
    Resources like the MDN docs and CSS tricks are here to help. 3:53

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up