[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.53,0:00:04.19,Default,,0000,0000,0000,,We've managed to do a lot so far\Nwith the selectors that we've seen in CSS:
Dialogue: 0,0:00:04.19,0:00:08.01,Default,,0000,0000,0000,,selecting elements by tag name,\Nby ID, and by class name.
Dialogue: 0,0:00:08.29,0:00:11.03,Default,,0000,0000,0000,,Let's review those for a second\Nin this webpage.
Dialogue: 0,0:00:11.26,0:00:13.66,Default,,0000,0000,0000,,This webpage is all about donuts.
Dialogue: 0,0:00:13.79,0:00:15.96,Default,,0000,0000,0000,,And it has a heading, paragraphs--
Dialogue: 0,0:00:15.96,0:00:18.94,Default,,0000,0000,0000,,and some of the paragraphs are\Nshort one-liner facts.
Dialogue: 0,0:00:19.24,0:00:23.14,Default,,0000,0000,0000,,The CSS starts with a rule about selecting\Nall of the `` tags on the page,
Dialogue: 0,0:00:23.14,0:00:25.61,Default,,0000,0000,0000,,and giving them\Na font family of sans-serif.
Dialogue: 0,0:00:26.07,0:00:30.06,Default,,0000,0000,0000,,I'll change this to monospace,\Nso you can see everything it selects.
Dialogue: 0,0:00:30.78,0:00:31.81,Default,,0000,0000,0000,,See it?
Dialogue: 0,0:00:34.10,0:00:37.84,Default,,0000,0000,0000,,The next rule selects whatever element\Nhas an ID of `donut-header`.
Dialogue: 0,0:00:38.03,0:00:41.91,Default,,0000,0000,0000,,And we know it's selecting for an ID,\Nbecause it starts with this hash symbol.
Dialogue: 0,0:00:42.03,0:00:43.76,Default,,0000,0000,0000,,Since the ID is pretty descriptive,
Dialogue: 0,0:00:43.76,0:00:46.69,Default,,0000,0000,0000,,it sounds to me like it's selecting\Nthe big heading at the top
Dialogue: 0,0:00:46.69,0:00:47.75,Default,,0000,0000,0000,,and changing its font.
Dialogue: 0,0:00:47.97,0:00:51.42,Default,,0000,0000,0000,,But I'll just scroll down and confirm\Nthat the `` has the ID.
Dialogue: 0,0:00:51.45,0:00:53.18,Default,,0000,0000,0000,,Yep, there it is.
Dialogue: 0,0:00:53.39,0:00:56.79,Default,,0000,0000,0000,,The final rule selects all the elements\Nthat have the `fact` class name.
Dialogue: 0,0:00:56.90,0:01:00.38,Default,,0000,0000,0000,,And we know it's looking for a class name,\Nbecause it starts with a dot.
Dialogue: 0,0:01:00.49,0:01:02.96,Default,,0000,0000,0000,,To figure out which elements\Nhave that class name,
Dialogue: 0,0:01:02.96,0:01:05.23,Default,,0000,0000,0000,,I can either look at\Nwhat the rule is doing--
Dialogue: 0,0:01:05.23,0:01:07.83,Default,,0000,0000,0000,,adding a top and bottom border\Nand some padding--
Dialogue: 0,0:01:07.83,0:01:10.46,Default,,0000,0000,0000,,or I can look through my HTML\Nfor the class name.
Dialogue: 0,0:01:10.62,0:01:13.15,Default,,0000,0000,0000,,I can see the class name\Nis on this paragraph
Dialogue: 0,0:01:13.15,0:01:14.30,Default,,0000,0000,0000,,and this paragraph--
Dialogue: 0,0:01:14.30,0:01:16.46,Default,,0000,0000,0000,,the two paragraphs\Nwith the one-liner facts--
Dialogue: 0,0:01:16.46,0:01:18.32,Default,,0000,0000,0000,,and that's why they have the border.
Dialogue: 0,0:01:18.45,0:01:19.78,Default,,0000,0000,0000,,Class names are great,
Dialogue: 0,0:01:19.78,0:01:23.01,Default,,0000,0000,0000,,because they let us use the same styles\Nacross multiple elements.
Dialogue: 0,0:01:23.03,0:01:25.35,Default,,0000,0000,0000,,But there's even more\Nwe can do with class names,
Dialogue: 0,0:01:25.35,0:01:27.06,Default,,0000,0000,0000,,and that's what I'll show you now.
Dialogue: 0,0:01:27.23,0:01:29.14,Default,,0000,0000,0000,,So we have a webpage about donuts,
Dialogue: 0,0:01:29.14,0:01:31.36,Default,,0000,0000,0000,,but donuts are really\Nnot that healthy for you.
Dialogue: 0,0:01:31.44,0:01:34.01,Default,,0000,0000,0000,,They might be one of the\Nleast healthy things for you.
Dialogue: 0,0:01:34.03,0:01:36.96,Default,,0000,0000,0000,,And they're also kind of addictive,\Nbecause of all that sugar.
Dialogue: 0,0:01:37.01,0:01:39.64,Default,,0000,0000,0000,,So if we're going to have a page\Ntalking about them,
Dialogue: 0,0:01:39.64,0:01:42.42,Default,,0000,0000,0000,,we should probably warn people\Nabout their unhealthiness.
Dialogue: 0,0:01:42.54,0:01:47.26,Default,,0000,0000,0000,,How about we make this top fact red,\Nto really get across that it's a warning?
Dialogue: 0,0:01:47.63,0:01:49.02,Default,,0000,0000,0000,,How would we do that?
Dialogue: 0,0:01:49.20,0:01:53.40,Default,,0000,0000,0000,,Well, we could start with adding\Na `color` property to the `fact` CSS rule,
Dialogue: 0,0:01:53.40,0:01:55.10,Default,,0000,0000,0000,,and see what that does.
Dialogue: 0,0:01:55.65,0:02:00.33,Default,,0000,0000,0000,,But that made both of the facts red,\Nand that second fact isn't a warning,
Dialogue: 0,0:02:00.33,0:02:01.85,Default,,0000,0000,0000,,it's just a spelling thing.
Dialogue: 0,0:02:02.05,0:02:03.84,Default,,0000,0000,0000,,So we don't want it to be red.
Dialogue: 0,0:02:04.17,0:02:05.58,Default,,0000,0000,0000,,We could add an ID,
Dialogue: 0,0:02:05.58,0:02:09.57,Default,,0000,0000,0000,,but then if we wanted to color\Nother things that were warnings later
Dialogue: 0,0:02:09.57,0:02:10.96,Default,,0000,0000,0000,,and add more warnings,
Dialogue: 0,0:02:10.96,0:02:14.18,Default,,0000,0000,0000,,then we'd have to keep adding IDs,\Nand rules for those IDs.
Dialogue: 0,0:02:14.39,0:02:19.81,Default,,0000,0000,0000,,In a case like this, the best thing to do\Nis to add another class to the `` tag.
Dialogue: 0,0:02:20.10,0:02:24.15,Default,,0000,0000,0000,,Browsers actually let us add as many\Nclasses as we want to a single tag.
Dialogue: 0,0:02:24.54,0:02:28.53,Default,,0000,0000,0000,,To do that, we just put our cursor\Nafter the last class name,
Dialogue: 0,0:02:28.53,0:02:33.20,Default,,0000,0000,0000,,put a space, and then write\Na new class name, like `warning`.
Dialogue: 0,0:02:33.98,0:02:36.33,Default,,0000,0000,0000,,Now we can make a rule for warning,
Dialogue: 0,0:02:37.12,0:02:40.24,Default,,0000,0000,0000,,and move this color property\Ninto the rule.
Dialogue: 0,0:02:40.84,0:02:44.00,Default,,0000,0000,0000,,And now the the top fact is red,\Nand the second one isn't.
Dialogue: 0,0:02:44.22,0:02:45.41,Default,,0000,0000,0000,,Beautiful.
Dialogue: 0,0:02:45.85,0:02:49.28,Default,,0000,0000,0000,,We can put the class name\Non more elements, like before.
Dialogue: 0,0:02:49.64,0:02:54.12,Default,,0000,0000,0000,,Maybe we want to color the\Nstrong text, "deep fried"--
Dialogue: 0,0:02:54.12,0:02:56.99,Default,,0000,0000,0000,,we want to color that red\Nbecause deep-fried stuff
Dialogue: 0,0:02:56.99,0:02:59.87,Default,,0000,0000,0000,,are often associated with being unhealthy.
Dialogue: 0,0:03:00.02,0:03:03.69,Default,,0000,0000,0000,,So we can just add\N`class ="warning"`--
Dialogue: 0,0:03:03.69,0:03:04.63,Default,,0000,0000,0000,,also red.
Dialogue: 0,0:03:05.04,0:03:10.82,Default,,0000,0000,0000,,Now notice that this warning here\Nhas that red color,
Dialogue: 0,0:03:10.82,0:03:14.65,Default,,0000,0000,0000,,and it also still has the `border: top`\Nand `border: bottom`.
Dialogue: 0,0:03:14.80,0:03:17.54,Default,,0000,0000,0000,,And that's what happens\Nwhen using multiple classes--
Dialogue: 0,0:03:17.54,0:03:20.58,Default,,0000,0000,0000,,the browsers will look at\Nall the rules that apply to them
Dialogue: 0,0:03:20.58,0:03:22.34,Default,,0000,0000,0000,,and apply all the relevant styles.
Dialogue: 0,0:03:22.73,0:03:26.81,Default,,0000,0000,0000,,We should be careful about using\Njust colors for conveying meaning,
Dialogue: 0,0:03:26.81,0:03:28.56,Default,,0000,0000,0000,,because some people are colorblind.
Dialogue: 0,0:03:28.64,0:03:31.30,Default,,0000,0000,0000,,There are some people who can\Nbarely tell the difference
Dialogue: 0,0:03:31.30,0:03:33.82,Default,,0000,0000,0000,,between red and black--\Nand maybe you're one of them.
Dialogue: 0,0:03:33.90,0:03:37.46,Default,,0000,0000,0000,,So let's let's change our class\Nto make it more noticable for everyone.
Dialogue: 0,0:03:38.07,0:03:40.71,Default,,0000,0000,0000,,We'll change this color\Nto a background color,
Dialogue: 0,0:03:40.71,0:03:44.74,Default,,0000,0000,0000,,because anybody can tell\Nthat something has a background color.
Dialogue: 0,0:03:45.10,0:03:47.56,Default,,0000,0000,0000,,That's pretty low contrast,\Nthat red and black.
Dialogue: 0,0:03:47.56,0:03:51.30,Default,,0000,0000,0000,,And contrast is also important\Nto make our page readable to everyone.
Dialogue: 0,0:03:51.40,0:03:54.08,Default,,0000,0000,0000,,So let's just make the color white.
Dialogue: 0,0:03:54.78,0:03:56.81,Default,,0000,0000,0000,,Okay, now we have high contrast,
Dialogue: 0,0:03:56.81,0:03:59.61,Default,,0000,0000,0000,,and a red background\Nfor people who can see red.
Dialogue: 0,0:03:59.99,0:04:04.50,Default,,0000,0000,0000,,And since we used a class, both our\Nwarning tags have those same styles.
Dialogue: 0,0:04:04.77,0:04:07.79,Default,,0000,0000,0000,,Now, thanks to the flexibility\Nof CSS classes,
Dialogue: 0,0:04:07.79,0:04:10.74,Default,,0000,0000,0000,,we can save the whole world from donuts.