0
1
00:00:00,410 --> 00: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

2
00:00:07,140 --> 00:00:09,550
selectors in CSS code.
2

3
00:00:09,570 --> 00: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

4
00:00:14,820 --> 00:00:19,280
useful so that you can understand what exactly is going on over here.
4

5
00:00:19,410 --> 00:00:22,320
But now we're going to continue to refactor our code.
5

6
00:00:22,320 --> 00: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

7
00:00:28,290 --> 00:00:34,350
have a colored background where the text is white and then we have other sections where the background
7

8
00:00:34,350 --> 00:00:36,640
is white and the text is black.
8

9
00:00:36,660 --> 00:00:40,000
So this is a repeated pattern across our web site.
9

10
00:00:40,140 --> 00:00:46,500
So I want to capture that and refactor our code to make it a little bit more modular and reusable.
10

11
00:00:46,500 --> 00: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

12
00:00:52,230 --> 00:00:57,870
based on whether it's a colored section or if it is a white section.
12

13
00:00:57,930 --> 00:01:02,830
So the first title section is a colored section,
13

14
00:01:02,850 --> 00:01:12,220
the second section, features section, is a white section, and then testimonials was colored, I think,
14

15
00:01:12,540 --> 00:01:21,900
and then press was also a colored section, and then pricing was a white section,
15

16
00:01:22,050 --> 00:01:33,800
and finally the cta was a colored section, and the footer was a white section.
16

17
00:01:33,810 --> 00:01:34,150
All right.
17

18
00:01:34,200 --> 00:01:39,600
So now all of our sections have a class depending on whether they should be white or if they should
18

19
00:01:39,600 --> 00:01:40,610
be colored.
19

20
00:01:40,710 --> 00: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

21
00:01:48,840 --> 00:01:56,730
I'm going to add another comment that's called sections, and I'm going to add our classes here,
21

22
00:01:56,730 --> 00:02:04,390
the colored-section and the white-section.
22

23
00:02:04,820 --> 00:02:05,150
All right.
23

24
00:02:05,160 --> 00: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

25
00:02:13,230 --> 00:02:18,900
color of that bright red pinkish color and then we give the text a white color.
25

26
00:02:19,290 --> 00: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

27
00:02:25,170 --> 00:02:29,990
we decide that we want to add other changes to our different sections,
27

28
00:02:30,000 --> 00:02:34,140
but at the moment that's basically all that each section has.
28

29
00:02:34,320 --> 00:02:36,830
So let's put that in here.
29

30
00:02:36,960 --> 00: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

31
00:02:42,630 --> 00:02:47,990
then the white section is simply going to have a background color of white.
31

32
00:02:48,360 --> 00: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

33
00:02:54,840 --> 00:03:00,270
testimonial section, even though it's a colored section because it has white tags and has a background
33

34
00:03:00,270 --> 00:03:03,690
color and we've already given it a class of colored-section,
34

35
00:03:03,690 --> 00:03:08,880
it is slightly different from the other colored sections because it has this kind of peachy color rather
35

36
00:03:08,880 --> 00:03:11,300
than this bright pinkish red.
36

37
00:03:11,400 --> 00:03:18,180
So what we can do here is we can delete the part that's repeated, which is the
37

38
00:03:18,180 --> 00:03:24,720
white text, because it's already inside a section that has a class of colored-section, which has that
38

39
00:03:24,960 --> 00:03:32,570
text color that's applied, but we can override the background color by applying a style to our id.
39

40
00:03:32,850 --> 00:03:38,560
And it's important to remember that there is a hierarchy between different types of selectors,
40

41
00:03:38,610 --> 00:03:45,510
as we mentioned before. So ids are the most specific and their styles get applied preferentially over
41

42
00:03:45,510 --> 00:03:46,740
everything else,
42

43
00:03:46,740 --> 00:03:51,560
then next comes classes, and finally comes these HTML elements.
43

44
00:03:51,660 --> 00:03:59,090
So if I right click and inspect to go into the Chrome Developer Tools and I select our section here
44

45
00:03:59,130 --> 00:04:04,530
which has an HTML element of section,
45

46
00:04:04,590 --> 00:04:08,290
class of colored-section, and an id of testimonials,
46

47
00:04:08,340 --> 00:04:13,590
you can see that even though colored-section is applying the background color of that bright pinkish
47

48
00:04:13,590 --> 00:04:18,570
color and id testimonials is applying this more peachy color,
48

49
00:04:18,570 --> 00:04:23,190
you can see that this one gets overridden and it's shown as being crossed out in the Chrome Developer
49

50
00:04:23,190 --> 00:04:23,690
Tools.
50

51
00:04:23,700 --> 00: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

52
00:04:30,030 --> 00:04:36,660
ranking, then it would default to the colored-section background color, but because we do, then this one
52

53
00:04:36,690 --> 00:04:40,160
is going to override the other color. And it's pretty much the same thing
53

54
00:04:40,170 --> 00:04:42,170
inside the press section as well.
54

55
00:04:42,170 --> 00:04:47,010
All right. So the last one that we have is the cta section which we can now basically delete because
55

56
00:04:47,010 --> 00:04:52,190
the section already has a class of colored-section so we don't need to write out that code again.
56

57
00:04:52,260 --> 00:04:59,010
So let's hit save and refresh our web site and hopefully absolutely nothing has changed.
57

58
00:04:59,010 --> 00:05:01,680
So we're doing a good job with our refactoring.
58

59
00:05:01,740 --> 00:05:07,310
Now another thing that you might have noticed up here is that, because we're targeting the container that's
59

60
00:05:07,380 --> 00:05:12,630
inside the title section, we don't actually need this extra title id.
60

61
00:05:12,630 --> 00:05:20,040
We can actually just combine these two into the same selector and we can delete that specific title
61

62
00:05:20,040 --> 00:05:20,970
id selector.