WEBVTT 0 00:00.410 --> 00:07.140 All right. So in the last lesson we looked at what this syntax means and we learned all about how to combine 1 00:07.140 --> 00:09.550 selectors in CSS code. 2 00:09.570 --> 00:14.820 Now if you haven't taken a look at that then I strongly recommend you do because it's really really 3 00:14.820 --> 00:19.280 useful so that you can understand what exactly is going on over here. 4 00:19.410 --> 00:22.320 But now we're going to continue to refactor our code. 5 00:22.320 --> 00:28.290 So the next thing I want to do relates to the fact that we've got certain sections on our web site that 6 00:28.290 --> 00:34.350 have a colored background where the text is white and then we have other sections where the background 7 00:34.350 --> 00:36.640 is white and the text is black. 8 00:36.660 --> 00:40.000 So this is a repeated pattern across our web site. 9 00:40.140 --> 00:46.500 So I want to capture that and refactor our code to make it a little bit more modular and reusable. 10 00:46.500 --> 00:52.170 So what I'm going to do is I'm going to look through my code and give each of these sections a class 11 00:52.230 --> 00:57.870 based on whether it's a colored section or if it is a white section. 12 00:57.930 --> 01:02.830 So the first title section is a colored section, 13 01:02.850 --> 01:12.220 the second section, features section, is a white section, and then testimonials was colored, I think, 14 01:12.540 --> 01:21.900 and then press was also a colored section, and then pricing was a white section, 15 01:22.050 --> 01:33.800 and finally the cta was a colored section, and the footer was a white section. 16 01:33.810 --> 01:34.150 All right. 17 01:34.200 --> 01:39.600 So now all of our sections have a class depending on whether they should be white or if they should 18 01:39.600 --> 01:40.610 be colored. 19 01:40.710 --> 01:48.830 And if I hit save I can now go and create some of these sections up top so just below containers. 20 01:48.840 --> 01:56.730 I'm going to add another comment that's called sections, and I'm going to add our classes here, 21 01:56.730 --> 02:04.390 the colored-section and the white-section. 22 02:04.820 --> 02:05.150 All right. 23 02:05.160 --> 02:13.230 So now if we take a look at our code you can see that for the colored sections we tend to add a background 24 02:13.230 --> 02:18.900 color of that bright red pinkish color and then we give the text a white color. 25 02:19.290 --> 02:25.170 Now for the white sections we tend to just give it a background color of white and maybe a little later on 26 02:25.170 --> 02:29.990 we decide that we want to add other changes to our different sections, 27 02:30.000 --> 02:34.140 but at the moment that's basically all that each section has. 28 02:34.320 --> 02:36.830 So let's put that in here. 29 02:36.960 --> 02:42.630 So I'm going to remove these two bits of code and I'm going to put it inside the colored section and 30 02:42.630 --> 02:47.990 then the white section is simply going to have a background color of white. 31 02:48.360 --> 02:54.840 And now I can go through my code and remove some of the repeated declarations. So, in the case of the 32 02:54.840 --> 03:00.270 testimonial section, even though it's a colored section because it has white tags and has a background 33 03:00.270 --> 03:03.690 color and we've already given it a class of colored-section, 34 03:03.690 --> 03:08.880 it is slightly different from the other colored sections because it has this kind of peachy color rather 35 03:08.880 --> 03:11.300 than this bright pinkish red. 36 03:11.400 --> 03:18.180 So what we can do here is we can delete the part that's repeated, which is the 37 03:18.180 --> 03:24.720 white text, because it's already inside a section that has a class of colored-section, which has that 38 03:24.960 --> 03:32.570 text color that's applied, but we can override the background color by applying a style to our id. 39 03:32.850 --> 03:38.560 And it's important to remember that there is a hierarchy between different types of selectors, 40 03:38.610 --> 03:45.510 as we mentioned before. So ids are the most specific and their styles get applied preferentially over 41 03:45.510 --> 03:46.740 everything else, 42 03:46.740 --> 03:51.560 then next comes classes, and finally comes these HTML elements. 43 03:51.660 --> 03:59.090 So if I right click and inspect to go into the Chrome Developer Tools and I select our section here 44 03:59.130 --> 04:04.530 which has an HTML element of section, 45 04:04.590 --> 04:08.290 class of colored-section, and an id of testimonials, 46 04:08.340 --> 04:13.590 you can see that even though colored-section is applying the background color of that bright pinkish 47 04:13.590 --> 04:18.570 color and id testimonials is applying this more peachy color, 48 04:18.570 --> 04:23.190 you can see that this one gets overridden and it's shown as being crossed out in the Chrome Developer 49 04:23.190 --> 04:23.690 Tools. 50 04:23.700 --> 04:30.030 So if we didn't have this style that's applied in the id, which as we said is more specific, has higher 51 04:30.030 --> 04:36.660 ranking, then it would default to the colored-section background color, but because we do, then this one 52 04:36.690 --> 04:40.160 is going to override the other color. And it's pretty much the same thing 53 04:40.170 --> 04:42.170 inside the press section as well. 54 04:42.170 --> 04:47.010 All right. So the last one that we have is the cta section which we can now basically delete because 55 04:47.010 --> 04:52.190 the section already has a class of colored-section so we don't need to write out that code again. 56 04:52.260 --> 04:59.010 So let's hit save and refresh our web site and hopefully absolutely nothing has changed. 57 04:59.010 --> 05:01.680 So we're doing a good job with our refactoring. 58 05:01.740 --> 05:07.310 Now another thing that you might have noticed up here is that, because we're targeting the container that's 59 05:07.380 --> 05:12.630 inside the title section, we don't actually need this extra title id. 60 05:12.630 --> 05:20.040 We can actually just combine these two into the same selector and we can delete that specific title 61 05:20.040 --> 05:20.970 id selector.