0:00:00.531,0:00:04.192
We've managed to do a lot so far[br]with the selectors that we've seen in CSS:

0:00:04.192,0:00:08.006
selecting elements by tag name,[br]by ID, and by class name.

0:00:08.290,0:00:11.028
Let's review those for a second[br]in this webpage.

0:00:11.257,0:00:13.655
This webpage is all about donuts.

0:00:13.789,0:00:15.963
And it has a heading, paragraphs--

0:00:15.963,0:00:18.944
and some of the paragraphs are[br]short one-liner facts.

0:00:19.242,0:00:23.142
The CSS starts with a rule about selecting[br]all of the `` tags on the page,

0:00:23.142,0:00:25.611
and giving them[br]a font family of sans-serif.

0:00:26.074,0:00:30.063
I'll change this to monospace,[br]so you can see everything it selects.

0:00:30.785,0:00:31.808
See it?

0:00:34.102,0:00:37.836
The next rule selects whatever element[br]has an ID of `donut-header`.

0:00:38.034,0:00:41.913
And we know it's selecting for an ID,[br]because it starts with this hash symbol.

0:00:42.029,0:00:43.759
Since the ID is pretty descriptive,

0:00:43.759,0:00:46.688
it sounds to me like it's selecting[br]the big heading at the top

0:00:46.688,0:00:47.747
and changing its font.

0:00:47.974,0:00:51.417
But I'll just scroll down and confirm[br]that the `` has the ID.

0:00:51.453,0:00:53.184
Yep, there it is.

0:00:53.387,0:00:56.790
The final rule selects all the elements[br]that have the `fact` class name.

0:00:56.896,0:01:00.384
And we know it's looking for a class name,[br]because it starts with a dot.

0:01:00.488,0:01:02.956
To figure out which elements[br]have that class name,

0:01:02.956,0:01:05.230
I can either look at[br]what the rule is doing--

0:01:05.230,0:01:07.833
adding a top and bottom border[br]and some padding--

0:01:07.833,0:01:10.462
or I can look through my HTML[br]for the class name.

0:01:10.619,0:01:13.148
I can see the class name[br]is on this paragraph

0:01:13.148,0:01:14.300
and this paragraph--

0:01:14.300,0:01:16.461
the two paragraphs[br]with the one-liner facts--

0:01:16.461,0:01:18.315
and that's why they have the border.

0:01:18.448,0:01:19.778
Class names are great,

0:01:19.778,0:01:23.007
because they let us use the same styles[br]across multiple elements.

0:01:23.033,0:01:25.346
But there's even more[br]we can do with class names,

0:01:25.346,0:01:27.058
and that's what I'll show you now.

0:01:27.230,0:01:29.136
So we have a webpage about donuts,

0:01:29.136,0:01:31.361
but donuts are really[br]not that healthy for you.

0:01:31.436,0:01:34.007
They might be one of the[br]least healthy things for you.

0:01:34.030,0:01:36.963
And they're also kind of addictive,[br]because of all that sugar.

0:01:37.009,0:01:39.644
So if we're going to have a page[br]talking about them,

0:01:39.644,0:01:42.421
we should probably warn people[br]about their unhealthiness.

0:01:42.539,0:01:47.257
How about we make this top fact red,[br]to really get across that it's a warning?

0:01:47.626,0:01:49.015
How would we do that?

0:01:49.200,0:01:53.401
Well, we could start with adding[br]a `color` property to the `fact` CSS rule,

0:01:53.401,0:01:55.099
and see what that does.

0:01:55.650,0:02:00.326
But that made both of the facts red,[br]and that second fact isn't a warning,

0:02:00.326,0:02:01.847
it's just a spelling thing.

0:02:02.051,0:02:03.845
So we don't want it to be red.

0:02:04.169,0:02:05.578
We could add an ID,

0:02:05.578,0:02:09.573
but then if we wanted to color[br]other things that were warnings later

0:02:09.573,0:02:10.958
and add more warnings,

0:02:10.958,0:02:14.185
then we'd have to keep adding IDs,[br]and rules for those IDs.

0:02:14.391,0:02:19.806
In a case like this, the best thing to do[br]is to add another class to the `` tag.

0:02:20.104,0:02:24.151
Browsers actually let us add as many[br]classes as we want to a single tag.

0:02:24.541,0:02:28.532
To do that, we just put our cursor[br]after the last class name,

0:02:28.532,0:02:33.196
put a space, and then write[br]a new class name, like `warning`.

0:02:33.984,0:02:36.329
Now we can make a rule for warning,

0:02:37.119,0:02:40.243
and move this color property[br]into the rule.

0:02:40.835,0:02:44.001
And now the the top fact is red,[br]and the second one isn't.

0:02:44.218,0:02:45.411
Beautiful.

0:02:45.852,0:02:49.285
We can put the class name[br]on more elements, like before.

0:02:49.643,0:02:54.121
Maybe we want to color the[br]strong text, "deep fried"--

0:02:54.121,0:02:56.986
we want to color that red[br]because deep-fried stuff

0:02:56.986,0:02:59.872
are often associated with being unhealthy.

0:03:00.025,0:03:03.692
So we can just add[br]`class ="warning"`--

0:03:03.692,0:03:04.626
also red.

0:03:05.035,0:03:10.820
Now notice that this warning here[br]has that red color,

0:03:10.820,0:03:14.653
and it also still has the `border: top`[br]and `border: bottom`.

0:03:14.795,0:03:17.545
And that's what happens[br]when using multiple classes--

0:03:17.545,0:03:20.578
the browsers will look at[br]all the rules that apply to them

0:03:20.578,0:03:22.340
and apply all the relevant styles.

0:03:22.733,0:03:26.810
We should be careful about using[br]just colors for conveying meaning,

0:03:26.810,0:03:28.563
because some people are colorblind.

0:03:28.636,0:03:31.298
There are some people who can[br]barely tell the difference

0:03:31.298,0:03:33.815
between red and black--[br]and maybe you're one of them.

0:03:33.899,0:03:37.463
So let's let's change our class[br]to make it more noticable for everyone.

0:03:38.070,0:03:40.711
We'll change this color[br]to a background color,

0:03:40.711,0:03:44.740
because anybody can tell[br]that something has a background color.

0:03:45.104,0:03:47.564
That's pretty low contrast,[br]that red and black.

0:03:47.564,0:03:51.304
And contrast is also important[br]to make our page readable to everyone.

0:03:51.400,0:03:54.080
So let's just make the color white.

0:03:54.785,0:03:56.811
Okay, now we have high contrast,

0:03:56.811,0:03:59.611
and a red background[br]for people who can see red.

0:03:59.994,0:04:04.497
And since we used a class, both our[br]warning tags have those same styles.

0:04:04.774,0:04:07.787
Now, thanks to the flexibility[br]of CSS classes,

0:04:07.787,0:04:10.735
we can save the whole world from donuts.