1
00:00:01,010 --> 00:00:08,620
Looking one more time at CSS Tricks'
diagram called "Anatomy of a Media Query,"

2
00:00:08,620 --> 00:00:12,010
you might notice that we skipped
one portion of the diagram.

3
00:00:13,020 --> 00:00:17,873
CSS media queries accept logical
operators that allow you to

4
00:00:17,873 --> 00:00:22,070
combine multiple
characteristics into one query.

5
00:00:23,980 --> 00:00:27,988
For example,
what if we wanted to set a minimum and

6
00:00:27,988 --> 00:00:31,910
maximum viewport width for
applying a CSS rule?

7
00:00:32,910 --> 00:00:38,603
You might want an element

8
00:00:38,603 --> 00:00:44,296
to be styled a certain way

9
00:00:44,296 --> 00:00:49,446
only when the viewport

10
00:00:49,446 --> 00:00:54,326
is between 600 and

11
00:00:54,326 --> 00:01:00,846
800 pixels for example.

12
00:01:13,275 --> 00:01:20,520
We can add as many conditions as we
want separated by the and operator.

13
00:01:20,520 --> 00:01:23,793
In this case,
we're turning our header text yellow.

14
00:01:23,793 --> 00:01:31,353
But only when the screen is at least 600
pixels wide, but no wider than 800 pixels.

15
00:01:33,206 --> 00:01:37,830
The logical operator called or
is used less frequently.

16
00:01:38,900 --> 00:01:44,660
In this case, the CSS rule will be applied
when either of the two conditions are met.

17
00:01:45,670 --> 00:01:49,179
And you'll notice we don't
literally type the word or

18
00:01:49,179 --> 00:01:53,000
we just separate our desired
media features using commas.

19
00:01:55,650 --> 00:01:59,243
Let's create a media query for
device screens

20
00:02:01,201 --> 00:02:06,670
that changes the background color of
our sections under two conditions.

21
00:02:06,670 --> 00:02:10,391
Either, the viewpoint width
is at least 900 pixels,

22
00:02:14,354 --> 00:02:18,090
Or when the screen is in
portrait orientation.

23
00:02:28,230 --> 00:02:35,664
Now when my viewport is
wider than 900 pixels,

24
00:02:35,664 --> 00:02:40,443
the background of my sections is

25
00:02:40,443 --> 00:02:44,868
cornsilk no matter what, but

26
00:02:44,868 --> 00:02:51,070
on a narrower viewport it depends.

27
00:02:51,070 --> 00:02:55,306
If the height of the viewport
is taller than the width,

28
00:02:55,306 --> 00:02:59,462
that's portrait orientation,
so we see cornsilk.

29
00:02:59,462 --> 00:03:06,470
If the width of the viewport is wider than
the height, that's landscape orientation.

30
00:03:06,470 --> 00:03:08,258
So we see azure.

31
00:03:08,258 --> 00:03:12,310
Great job making it this far.

32
00:03:12,310 --> 00:03:17,016
The tools you've learned here will
allow you to exercise much more control

33
00:03:17,016 --> 00:03:19,040
over your CSS layout.

34
00:03:19,040 --> 00:03:21,019
And not just on the desktop.

35
00:03:21,019 --> 00:03:24,620
You've been introduced
to CSS media queries.

36
00:03:24,620 --> 00:03:29,567
And you can use that knowledge to
target devices by type, screen width,

37
00:03:29,567 --> 00:03:31,200
and even orientation.

38
00:03:32,320 --> 00:03:35,725
As you practice what we've learned here,
keep the notes and

39
00:03:35,725 --> 00:03:38,640
resources we've covered handy.

40
00:03:38,640 --> 00:03:44,850
Mastering CSS layout involves learning
a lot of properties and values.

41
00:03:44,850 --> 00:03:49,261
But the one thing you needn't
worry about is memorizing it all.

42
00:03:49,261 --> 00:03:53,966
Keep on coding and
experimenting, but also reading.

43
00:03:53,966 --> 00:03:59,160
Resources like the MDN docs and
CSS tricks are here to help.