So the middle section just has three elements. Heading, paragraph and one image. 1
So we need the according elements in Webflow. 2
Now let's put our content inside and see where does that take us. 3
Next, 4
let's export the image. 5
This time we can export JPEG instead of PNG, because the background is white, so we won't get any color 6
mismatches. 7
We're gonna do 2X for routine optimization. 8
And of course, run the image through Optimizilla to compress the file. PNGs and JPEGs you should 9
always compress. SVGs can be compressed too, but most of the time, it's not necessary. 10
They are small enough. 11
Since we exported 2X, we need to enable HiDPI option. 12
It almost looks like our design. 13
We need to center everything somehow. 14
We could set Text Align to center on the container div block. But we can't do that on our generic container, 15
because it's going to center elements everywhere and mess up our content elsewhere. Like on our hero 16
section. We could, of course, duplicate this container class and create a new one with a center layout. 17
But that sort of beats the purpose of having this default generic container, that we're going to use 18
across the website. 19
Luckily CSS has a super smart solution for this - 20
The Combo Classes. Let me demonstrate. 21
We've got a generic button here. 22
Let's apply our existing Button class from the hero section. 23
Once we reach this section from the design, instead of white 24
we will need to use blue version. 25
But instead of duplicating the Button class, we're going to keep the same base class and add a combo 26
class to it. 27
There are two classes now in the selector. Button, which is the base class and blue, which is a combo class. 28
Any changes we make to this new button, from this point, won't affect the original white button. 29
But the beauty of the combo class is that every other property that we didn't touch, is still being inherited 30
from the base Button class. 31
This means if we at some point decide to change the style of our buttons like make them square, or decrease 32
padding, or change the font style. All of those changes will be reflected on the blue button as well. 33
However, all those properties that we have applied to the blue combo class, won't be affected at all. 34
In this case, the background and text colors. 35
It's not really a crime if you don't use combo classes. 36
Regular people visiting your website are not gonna know difference if you're using combo classes 37
or not. 38
And frankly, they don't really care. 39
But this is what pros do to save time, produce a cleaner code and have a better control over the website. 40
And of course, I want you to become a pro, create websites efficiently and make more money by saving time 41
during the development. 42
This combo classes fit the inheritance tree at the bottom of the hierarchy. 43
They inherit styles from the base class, who in turn inherit styles from the related tag. Related is an 44
important word here. Because a paragraph won't inherit any styles from H1 tag or a heading tag. Only from paragraph 45
tag. And all of those tags inherit some styles from the body tag. And when we override styles, we are overriding 46
from the bottom. 47
More specific style wins. 48
So the combo class can override everything above it - 49
the base class, the related tag and the body tag. 50
Similarly, a base class can override everything above it. But it won't affect the combo class, if that 51
combo class is in charge of that specific type of style, like font color or background color and so 52
on. 53
That's exactly what CSS stands for - Cascading Style Sheets. 54
If you were dying to know. So the styles cascade from the top to the bottom. Sort of like a waterfall. You 55
can see how combo class has been added to the inheritance menu. And this menu, 56
gives us an ability to select any stage of this hierarchy and edit exactly that stage. 57
For example, the base class. By the way this inheritance menu can also show what specific tag can control 58
your element. 59
The second pink box says All Links. 60
Why? 61
Because buttons are regular links. 62
We just style them to make them look like buttons. 63
So if we set some styles on all links tag, then you will notice those styles on your buttons until you 64
override them. 65
Okay, back to our container. 66
We can add a combo class called Center. And then change the text alignment of the font. 67
This should center all our content as we want it. From this point, 68
if we ever need another container with center alignment, we can apply this combo class just like we would 69
apply a regular base class. Webflow even displays combo classes that are linked to that base class. So 70
you can choose an existing combo class. And voila. We get a centered container. Couple of things we need 71
to style in our section. 72
The width of the paragraph and the spacing. We can grab the spacing from our designs 30 pixel on top 73
and 60 on the bottom. 74
And of course, we can grab the width of the paragraph. too, which is 566 pixels. 75
But oops, 76
this happens. 77
I know you might be thinking here, "how come it doesn't center, didn't we set the center alignment on our 78
container?" But have a closer look. The text itself is centered inside the box, but the box isn't. 79
So why isn't the box in the middle? 80
Because the paragraph text is set to display block and text alignment option doesn't affect block level 81
elements. 82
It only affects actual text, Inline Block and Inline Elements. 83
So one way to center that entire paragraph block, is to change the display to Inline Block. 84
This might seem a little strange. 85
It works on Inline bock, but doesn't work on a regular block. 86
But that's OK. 87
You'll get the hang of it. 88
Another way to center it, is by setting auto margins, like we did with the container. 89
Remember what auto margins do? 90
They act like springs, that fill any remaining space and push the box in the middle. 91
Both of these are valid solutions, Automargin or Inline block. But I'm leaning towards using auto margin. 92
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
here, I am more likely to assume that the paragraph is set to default block rather than to Inline block. 94
And that's it we're looking good. 95
So to recap. We learned about combo classes and how they can save us a lot of time. Combo classes are 96
on the bottom of the hierarchy tree. So they inherit styles from everything above them, but they can override 97
any of those inherited styles and their changes won't affect anything above their level.