WEBVTT 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: 00:00:04.192 --> 00:00:08.006 selecting elements by tag name, by ID, and by class name. 00:00:08.290 --> 00:00:11.028 Let's review those for a second in this webpage. 00:00:11.257 --> 00:00:13.655 This webpage is all about donuts. 00:00:13.789 --> 00:00:15.963 And it has a heading, paragraphs-- 00:00:15.963 --> 00:00:18.944 and some of the paragraphs are short one-liner facts. 00:00:19.242 --> 00:00:23.142 The CSS starts with a rule about selecting all of the `` tags on the page, 00:00:23.142 --> 00:00:25.611 and giving them a font family of sans-serif. 00:00:26.074 --> 00:00:30.063 I'll change this to monospace, so you can see everything it selects. 00:00:30.785 --> 00:00:31.808 See it? 00:00:34.102 --> 00:00:37.836 The next rule selects whatever element has an ID of `donut-header`. 00:00:38.034 --> 00:00:41.913 And we know it's selecting for an ID, because it starts with this hash symbol. 00:00:42.029 --> 00:00:43.759 Since the ID is pretty descriptive, 00:00:43.759 --> 00:00:46.688 it sounds to me like it's selecting the big heading at the top 00:00:46.688 --> 00:00:47.747 and changing its font. 00:00:47.974 --> 00:00:51.417 But I'll just scroll down and confirm that the `` has the ID. 00:00:51.453 --> 00:00:53.184 Yep, there it is. 00:00:53.387 --> 00:00:56.790 The final rule selects all the elements that have the `fact` class name. 00:00:56.896 --> 00:01:00.384 And we know it's looking for a class name, because it starts with a dot. 00:01:00.488 --> 00:01:02.956 To figure out which elements have that class name, 00:01:02.956 --> 00:01:05.230 I can either look at what the rule is doing-- 00:01:05.230 --> 00:01:07.833 adding a top and bottom border and some padding-- 00:01:07.833 --> 00:01:10.462 or I can look through my HTML for the class name. 00:01:10.619 --> 00:01:13.148 I can see the class name is on this paragraph 00:01:13.148 --> 00:01:14.300 and this paragraph-- 00:01:14.300 --> 00:01:16.461 the two paragraphs with the one-liner facts-- 00:01:16.461 --> 00:01:18.315 and that's why they have the border. 00:01:18.448 --> 00:01:19.778 Class names are great, 00:01:19.778 --> 00:01:23.007 because they let us use the same styles across multiple elements. 00:01:23.033 --> 00:01:25.346 But there's even more we can do with class names, 00:01:25.346 --> 00:01:27.058 and that's what I'll show you now. 00:01:27.230 --> 00:01:29.136 So we have a webpage about donuts, 00:01:29.136 --> 00:01:31.361 but donuts are really not that healthy for you. 00:01:31.436 --> 00:01:34.007 They might be one of the least healthy things for you. 00:01:34.030 --> 00:01:36.963 And they're also kind of addictive, because of all that sugar. 00:01:37.009 --> 00:01:39.644 So if we're going to have a page talking about them, 00:01:39.644 --> 00:01:42.421 we should probably warn people about their unhealthiness. 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? 00:01:47.626 --> 00:01:49.015 How would we do that? 00:01:49.200 --> 00:01:53.401 Well, we could start with adding a `color` property to the `fact` CSS rule, 00:01:53.401 --> 00:01:55.099 and see what that does. 00:01:55.650 --> 00:02:00.326 But that made both of the facts red, and that second fact isn't a warning, 00:02:00.326 --> 00:02:01.847 it's just a spelling thing. 00:02:02.051 --> 00:02:03.845 So we don't want it to be red. 00:02:04.169 --> 00:02:05.578 We could add an ID, 00:02:05.578 --> 00:02:09.573 but then if we wanted to color other things that were warnings later 00:02:09.573 --> 00:02:10.958 and add more warnings, 00:02:10.958 --> 00:02:14.185 then we'd have to keep adding IDs, and rules for those IDs. 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. 00:02:20.104 --> 00:02:24.151 Browsers actually let us add as many classes as we want to a single tag. 00:02:24.541 --> 00:02:28.532 To do that, we just put our cursor after the last class name, 00:02:28.532 --> 00:02:33.196 put a space, and then write a new class name, like `warning`. 00:02:33.984 --> 00:02:36.329 Now we can make a rule for warning, 00:02:37.119 --> 00:02:40.243 and move this color property into the rule. 00:02:40.835 --> 00:02:44.001 And now the the top fact is red, and the second one isn't. 00:02:44.218 --> 00:02:45.411 Beautiful. 00:02:45.852 --> 00:02:49.285 We can put the class name on more elements, like before. 00:02:49.643 --> 00:02:54.121 Maybe we want to color the strong text, "deep fried"-- 00:02:54.121 --> 00:02:56.986 we want to color that red because deep-fried stuff 00:02:56.986 --> 00:02:59.872 are often associated with being unhealthy. 00:03:00.025 --> 00:03:03.692 So we can just add `class ="warning"`-- 00:03:03.692 --> 00:03:04.626 also red. 00:03:05.035 --> 00:03:10.820 Now notice that this warning here has that red color, 00:03:10.820 --> 00:03:14.653 and it also still has the `border: top` and `border: bottom`. 00:03:14.795 --> 00:03:17.545 And that's what happens when using multiple classes-- 00:03:17.545 --> 00:03:20.578 the browsers will look at all the rules that apply to them 00:03:20.578 --> 00:03:22.340 and apply all the relevant styles. 00:03:22.733 --> 00:03:26.810 We should be careful about using just colors for conveying meaning, 00:03:26.810 --> 00:03:28.563 because some people are colorblind. 00:03:28.636 --> 00:03:31.298 There are some people who can barely tell the difference 00:03:31.298 --> 00:03:33.815 between red and black-- and maybe you're one of them. 00:03:33.899 --> 00:03:37.463 So let's let's change our class to make it more noticable for everyone. 00:03:38.070 --> 00:03:40.711 We'll change this color to a background color, 00:03:40.711 --> 00:03:44.740 because anybody can tell that something has a background color. 00:03:45.104 --> 00:03:47.564 That's pretty low contrast, that red and black. 00:03:47.564 --> 00:03:51.304 And contrast is also important to make our page readable to everyone. 00:03:51.400 --> 00:03:54.080 So let's just make the color white. 00:03:54.785 --> 00:03:56.811 Okay, now we have high contrast, 00:03:56.811 --> 00:03:59.611 and a red background for people who can see red. 00:03:59.994 --> 00:04:04.497 And since we used a class, both our warning tags have those same styles. 00:04:04.774 --> 00:04:07.787 Now, thanks to the flexibility of CSS classes, 00:04:07.787 --> 00:04:10.735 we can save the whole world from donuts.