1
00:00:00,531 --> 00:00:04,192
We've managed to do a lot so far
with the selectors that we've seen in CSS:

2
00:00:04,192 --> 00:00:08,006
selecting elements by tag name,
by ID, and by class name.

3
00:00:08,290 --> 00:00:11,028
Let's review those for a second
in this webpage.

4
00:00:11,257 --> 00:00:13,655
This webpage is all about donuts.

5
00:00:13,789 --> 00:00:15,963
And it has a heading, paragraphs--

6
00:00:15,963 --> 00:00:18,944
and some of the paragraphs are
short one-liner facts.

7
00:00:19,242 --> 00:00:23,142
The CSS starts with a rule about selecting
all of the `` tags on the page,

8
00:00:23,142 --> 00:00:25,611
and giving them
a font family of sans-serif.

9
00:00:26,074 --> 00:00:30,063
I'll change this to monospace,
so you can see everything it selects.

10
00:00:30,785 --> 00:00:31,808
See it?

11
00:00:34,102 --> 00:00:37,836
The next rule selects whatever element
has an ID of `donut-header`.

12
00:00:38,034 --> 00:00:41,913
And we know it's selecting for an ID,
because it starts with this hash symbol.

13
00:00:42,029 --> 00:00:43,759
Since the ID is pretty descriptive,

14
00:00:43,759 --> 00:00:46,688
it sounds to me like it's selecting
the big heading at the top

15
00:00:46,688 --> 00:00:47,747
and changing its font.

16
00:00:47,974 --> 00:00:51,417
But I'll just scroll down and confirm
that the `` has the ID.

17
00:00:51,453 --> 00:00:53,184
Yep, there it is.

18
00:00:53,387 --> 00:00:56,790
The final rule selects all the elements
that have the `fact` class name.

19
00:00:56,896 --> 00:01:00,384
And we know it's looking for a class name,
because it starts with a dot.

20
00:01:00,488 --> 00:01:02,956
To figure out which elements
have that class name,

21
00:01:02,956 --> 00:01:05,230
I can either look at
what the rule is doing--

22
00:01:05,230 --> 00:01:07,833
adding a top and bottom border
and some padding--

23
00:01:07,833 --> 00:01:10,462
or I can look through my HTML
for the class name.

24
00:01:10,619 --> 00:01:13,148
I can see the class name
is on this paragraph

25
00:01:13,148 --> 00:01:14,300
and this paragraph--

26
00:01:14,300 --> 00:01:16,461
the two paragraphs
with the one-liner facts--

27
00:01:16,461 --> 00:01:18,315
and that's why they have the border.

28
00:01:18,448 --> 00:01:19,778
Class names are great,

29
00:01:19,778 --> 00:01:23,007
because they let us use the same styles
across multiple elements.

30
00:01:23,033 --> 00:01:25,346
But there's even more
we can do with class names,

31
00:01:25,346 --> 00:01:27,058
and that's what I'll show you now.

32
00:01:27,230 --> 00:01:29,136
So we have a webpage about donuts,

33
00:01:29,136 --> 00:01:31,361
but donuts are really
not that healthy for you.

34
00:01:31,436 --> 00:01:34,007
They might be one of the
least healthy things for you.

35
00:01:34,030 --> 00:01:36,963
And they're also kind of addictive,
because of all that sugar.

36
00:01:37,009 --> 00:01:39,644
So if we're going to have a page
talking about them,

37
00:01:39,644 --> 00:01:42,421
we should probably warn people
about their unhealthiness.

38
00:01:42,539 --> 00:01:47,257
How about we make this top fact red,
to really get across that it's a warning?

39
00:01:47,626 --> 00:01:49,015
How would we do that?

40
00:01:49,200 --> 00:01:53,401
Well, we could start with adding
a `color` property to the `fact` CSS rule,

41
00:01:53,401 --> 00:01:55,099
and see what that does.

42
00:01:55,650 --> 00:02:00,326
But that made both of the facts red,
and that second fact isn't a warning,

43
00:02:00,326 --> 00:02:01,847
it's just a spelling thing.

44
00:02:02,051 --> 00:02:03,845
So we don't want it to be red.

45
00:02:04,169 --> 00:02:05,578
We could add an ID,

46
00:02:05,578 --> 00:02:09,573
but then if we wanted to color
other things that were warnings later

47
00:02:09,573 --> 00:02:10,958
and add more warnings,

48
00:02:10,958 --> 00:02:14,185
then we'd have to keep adding IDs,
and rules for those IDs.

49
00:02:14,391 --> 00:02:19,806
In a case like this, the best thing to do
is to add another class to the `` tag.

50
00:02:20,104 --> 00:02:24,151
Browsers actually let us add as many
classes as we want to a single tag.

51
00:02:24,541 --> 00:02:28,532
To do that, we just put our cursor
after the last class name,

52
00:02:28,532 --> 00:02:33,196
put a space, and then write
a new class name, like `warning`.

53
00:02:33,984 --> 00:02:36,329
Now we can make a rule for warning,

54
00:02:37,119 --> 00:02:40,243
and move this color property
into the rule.

55
00:02:40,835 --> 00:02:44,001
And now the the top fact is red,
and the second one isn't.

56
00:02:44,218 --> 00:02:45,411
Beautiful.

57
00:02:45,852 --> 00:02:49,285
We can put the class name
on more elements, like before.

58
00:02:49,643 --> 00:02:54,121
Maybe we want to color the
strong text, "deep fried"--

59
00:02:54,121 --> 00:02:56,986
we want to color that red
because deep-fried stuff

60
00:02:56,986 --> 00:02:59,872
are often associated with being unhealthy.

61
00:03:00,025 --> 00:03:03,692
So we can just add
`class ="warning"`--

62
00:03:03,692 --> 00:03:04,626
also red.

63
00:03:05,035 --> 00:03:10,820
Now notice that this warning here
has that red color,

64
00:03:10,820 --> 00:03:14,653
and it also still has the `border: top`
and `border: bottom`.

65
00:03:14,795 --> 00:03:17,545
And that's what happens
when using multiple classes--

66
00:03:17,545 --> 00:03:20,578
the browsers will look at
all the rules that apply to them

67
00:03:20,578 --> 00:03:22,340
and apply all the relevant styles.

68
00:03:22,733 --> 00:03:26,810
We should be careful about using
just colors for conveying meaning,

69
00:03:26,810 --> 00:03:28,563
because some people are colorblind.

70
00:03:28,636 --> 00:03:31,298
There are some people who can
barely tell the difference

71
00:03:31,298 --> 00:03:33,815
between red and black--
and maybe you're one of them.

72
00:03:33,899 --> 00:03:37,463
So let's let's change our class
to make it more noticable for everyone.

73
00:03:38,070 --> 00:03:40,711
We'll change this color
to a background color,

74
00:03:40,711 --> 00:03:44,740
because anybody can tell
that something has a background color.

75
00:03:45,104 --> 00:03:47,564
That's pretty low contrast,
that red and black.

76
00:03:47,564 --> 00:03:51,304
And contrast is also important
to make our page readable to everyone.

77
00:03:51,400 --> 00:03:54,080
So let's just make the color white.

78
00:03:54,785 --> 00:03:56,811
Okay, now we have high contrast,

79
00:03:56,811 --> 00:03:59,611
and a red background
for people who can see red.

80
00:03:59,994 --> 00:04:04,497
And since we used a class, both our
warning tags have those same styles.

81
00:04:04,774 --> 00:04:07,787
Now, thanks to the flexibility
of CSS classes,

82
00:04:07,787 --> 00:04:10,735
we can save the whole world from donuts.