0
1
00:00:00,150 --> 00:00:04,660
So the middle section just has three elements. Heading, paragraph and one image.
1

2
00:00:04,680 --> 00:00:11,840
So we need the according elements in Webflow.
2

3
00:00:11,850 --> 00:00:15,180
Now let's put our content inside and see where does that take us.
3

4
00:00:26,550 --> 00:00:26,970
Next,
4

5
00:00:26,970 --> 00:00:28,380
let's export the image.
5

6
00:00:33,600 --> 00:00:39,300
This time we can export JPEG instead of PNG, because the background is white, so we won't get any color
6

7
00:00:39,340 --> 00:00:40,240
mismatches.
7

8
00:00:40,270 --> 00:00:43,050
We're gonna do 2X for routine optimization.
8

9
00:00:50,760 --> 00:00:56,880
And of course, run the image through Optimizilla to compress the file. PNGs and JPEGs you should
9

10
00:00:56,880 --> 00:01:02,470
always compress. SVGs can be compressed too, but most of the time, it's not necessary.
10

11
00:01:02,520 --> 00:01:03,330
They are small enough.
11

12
00:01:17,400 --> 00:01:23,660
Since we exported 2X, we need to enable HiDPI option.
12

13
00:01:23,720 --> 00:01:25,300
It almost looks like our design.
13

14
00:01:25,310 --> 00:01:27,340
We need to center everything somehow.
14

15
00:01:30,020 --> 00:01:36,080
We could set Text Align to center on the container div block. But we can't do that on our generic container,
15

16
00:01:36,110 --> 00:01:42,030
because it's going to center elements everywhere and mess up our content elsewhere. Like on our hero
16

17
00:01:42,030 --> 00:01:49,040
section. We could, of course, duplicate this container class and create a new one with a center layout.
17

18
00:01:49,340 --> 00:01:54,890
But that sort of beats the purpose of having this default generic container, that we're going to use
18

19
00:01:54,890 --> 00:01:56,480
across the website.
19

20
00:01:56,540 --> 00:01:59,890
Luckily CSS has a super smart solution for this -
20

21
00:02:00,020 --> 00:02:03,040
The Combo Classes. Let me demonstrate.
21

22
00:02:03,070 --> 00:02:04,700
We've got a generic button here.
22

23
00:02:05,060 --> 00:02:07,850
Let's apply our existing Button class from the hero section.
23

24
00:02:11,960 --> 00:02:14,970
Once we reach this section from the design, instead of white
24

25
00:02:14,990 --> 00:02:16,850
we will need to use blue version.
25

26
00:02:22,200 --> 00:02:28,200
But instead of duplicating the Button class, we're going to keep the same base class and add a combo
26

27
00:02:28,200 --> 00:02:29,490
class to it.
27

28
00:02:29,490 --> 00:02:35,910
There are two classes now in the selector. Button, which is the base class and blue, which is a combo class.
28

29
00:02:35,910 --> 00:02:41,130
Any changes we make to this new button, from this point, won't affect the original white button.
29

30
00:02:44,390 --> 00:02:50,150
But the beauty of the combo class is that every other property that we didn't touch, is still being inherited
30

31
00:02:50,150 --> 00:02:52,400
from the base Button class.
31

32
00:02:52,400 --> 00:02:58,460
This means if we at some point decide to change the style of our buttons like make them square, or decrease
32

33
00:02:58,460 --> 00:03:04,390
padding, or change the font style. All of those changes will be reflected on the blue button as well.
33

34
00:03:04,400 --> 00:03:09,860
However, all those properties that we have applied to the blue combo class, won't be affected at all.
34

35
00:03:09,860 --> 00:03:12,650
In this case, the background and text colors.
35

36
00:03:12,740 --> 00:03:15,260
It's not really a crime if you don't use combo classes.
36

37
00:03:15,260 --> 00:03:19,580
Regular people visiting your website are not gonna know difference if you're using combo classes
37

38
00:03:19,580 --> 00:03:20,090
or not.
38

39
00:03:20,210 --> 00:03:21,810
And frankly, they don't really care.
39

40
00:03:21,830 --> 00:03:28,230
But this is what pros do to save time, produce a cleaner code and have a better control over the website.
40

41
00:03:28,370 --> 00:03:35,660
And of course, I want you to become a pro, create websites efficiently and make more money by saving time
41

42
00:03:35,780 --> 00:03:37,000
during the development.
42

43
00:03:39,590 --> 00:03:43,760
This combo classes fit the inheritance tree at the bottom of the hierarchy.
43

44
00:03:43,760 --> 00:03:49,760
They inherit styles from the base class, who in turn inherit styles from the related tag. Related is an
44

45
00:03:49,760 --> 00:03:57,260
important word here. Because a paragraph won't inherit any styles from H1 tag or a heading tag. Only from paragraph
45

46
00:03:57,260 --> 00:04:04,190
tag. And all of those tags inherit some styles from the body tag. And when we override styles, we are overriding
46

47
00:04:04,190 --> 00:04:05,410
from the bottom.
47

48
00:04:05,570 --> 00:04:07,730
More specific style wins.
48

49
00:04:07,760 --> 00:04:10,460
So the combo class can override everything above it -
49

50
00:04:10,490 --> 00:04:13,730
the base class, the related tag and the body tag.
50

51
00:04:13,730 --> 00:04:19,910
Similarly, a base class can override everything above it. But it won't affect the combo class, if that
51

52
00:04:19,910 --> 00:04:26,180
combo class is in charge of that specific type of style, like font color or background color and so
52

53
00:04:26,180 --> 00:04:27,020
on.
53

54
00:04:27,020 --> 00:04:30,980
That's exactly what CSS stands for - Cascading Style Sheets.
54

55
00:04:31,340 --> 00:04:37,580
If you were dying to know. So the styles cascade from the top to the bottom. Sort of like a waterfall. You
55

56
00:04:37,580 --> 00:04:41,800
can see how combo class has been added to the inheritance menu. And this menu,
56

57
00:04:41,810 --> 00:04:46,730
gives us an ability to select any stage of this hierarchy and edit exactly that stage.
57

58
00:04:46,730 --> 00:04:52,850
For example, the base class. By the way this inheritance menu can also show what specific tag can control
58

59
00:04:52,850 --> 00:04:53,870
your element.
59

60
00:04:53,900 --> 00:04:56,470
The second pink box says All Links.
60

61
00:04:56,480 --> 00:04:57,130
Why?
61

62
00:04:57,200 --> 00:04:59,440
Because buttons are regular links.
62

63
00:04:59,630 --> 00:05:02,590
We just style them to make them look like buttons.
63

64
00:05:02,660 --> 00:05:09,650
So if we set some styles on all links tag, then you will notice those styles on your buttons until you
64

65
00:05:09,650 --> 00:05:10,420
override them.
65

66
00:05:13,050 --> 00:05:14,550
Okay, back to our container.
66

67
00:05:14,580 --> 00:05:22,490
We can add a combo class called Center. And then change the text alignment of the font.
67

68
00:05:22,500 --> 00:05:26,930
This should center all our content as we want it. From this point,
68

69
00:05:26,940 --> 00:05:31,740
if we ever need another container with center alignment, we can apply this combo class just like we would
69

70
00:05:31,740 --> 00:05:38,160
apply a regular base class. Webflow even displays combo classes that are linked to that base class. So
70

71
00:05:38,160 --> 00:05:45,580
you can choose an existing combo class. And voila. We get a centered container. Couple of things we need
71

72
00:05:45,580 --> 00:05:46,860
to style in our section.
72

73
00:05:46,960 --> 00:05:54,170
The width of the paragraph and the spacing. We can grab the spacing from our designs 30 pixel on top
73

74
00:05:54,170 --> 00:05:55,210
and 60 on the bottom.
74

75
00:06:07,710 --> 00:06:12,240
And of course, we can grab the width of the paragraph. too, which is 566 pixels.
75

76
00:06:15,150 --> 00:06:15,900
But oops,
76

77
00:06:15,900 --> 00:06:19,670
this happens.
77

78
00:06:19,940 --> 00:06:25,940
I know you might be thinking here, "how come it doesn't center, didn't we set the center alignment on our
78

79
00:06:25,940 --> 00:06:33,530
container?" But have a closer look. The text itself is centered inside the box, but the box isn't.
79

80
00:06:33,530 --> 00:06:35,510
So why isn't the box in the middle?
80

81
00:06:35,630 --> 00:06:42,440
Because the paragraph text is set to display block and text alignment option doesn't affect block level
81

82
00:06:42,440 --> 00:06:43,160
elements.
82

83
00:06:43,190 --> 00:06:48,480
It only affects actual text, Inline Block and Inline Elements.
83

84
00:06:48,530 --> 00:06:57,510
So one way to center that entire paragraph block, is to change the display to Inline Block.
84

85
00:06:57,580 --> 00:06:58,950
This might seem a little strange.
85

86
00:06:58,960 --> 00:07:02,020
It works on Inline bock, but doesn't work on a regular block.
86

87
00:07:02,320 --> 00:07:02,970
But that's OK.
87

88
00:07:02,980 --> 00:07:04,050
You'll get the hang of it.
88

89
00:07:04,150 --> 00:07:09,010
Another way to center it, is by setting auto margins, like we did with the container.
89

90
00:07:09,010 --> 00:07:10,840
Remember what auto margins do?
90

91
00:07:10,930 --> 00:07:15,700
They act like springs, that fill any remaining space and push the box in the middle.
91

92
00:07:15,700 --> 00:07:21,580
Both of these are valid solutions, Automargin or Inline block. But I'm leaning towards using auto margin.
92

93
00:07:21,850 --> 00:07:27,460
Because if I'm facing some sort of a bug and I'm trying to fix something, and I forget what I've done
93

94
00:07:27,460 --> 00:07:34,510
here, I am more likely to assume that the paragraph is set to default block rather than to Inline block.
94

95
00:07:36,740 --> 00:07:38,280
And that's it we're looking good.
95

96
00:07:40,380 --> 00:07:46,560
So to recap. We learned about combo classes and how they can save us a lot of time. Combo classes are
96

97
00:07:46,620 --> 00:07:53,610
on the bottom of the hierarchy tree. So they inherit styles from everything above them, but they can override
97

98
00:07:53,640 --> 00:07:58,770
any of those inherited styles and their changes won't affect anything above their level.