Voiceover: Let's continue to build our features section
So the first thing that we're gonna do with this
is white space, you surely remember that white space
is a very important thing, and so let's define white space
between the sections for all sections at the same time.
So let's format the section, and I will do it here
right in the reusable competence part of our code.
And we will put that white space
between the sections using petting.
Now you maybe say that to put a space between elements,
we use margin, and that's actually right, but I will use
petting because I will later have some--
I'm planning to have some sections with background colors,
and in order to preserve that background color,
we need to make sure that the space
is inside of each of the boxes.
You will see that later.
So I want a lot of white space, so let me say 80 pixels
at the top, and on the bottom.
Zero, so zero at left and right, so no margin.
Great, so this is a lot of white space,
and it looks great, right?
So the next thing is to format the H2 heading here.
So I want the H2 heading to look quite similar to the H1.
For example, I want it to have the same text transform,
the same letter spacing, and the same font white.
So what do I do in order to achieve that?
I just group the similar properties
just as I showed you before.
So H1 and H2 will have some things in common.
H1 and H2.
So this is for H1 only, this is for H1 only,
and this as well.
And also this, but the rest, we can leave here for both.
Now on H2, I want another font size, not so big, of course.
And I will say maybe 180 percent, so it's not so big.
And maybe a word spacing of 2 pixels.
Alright, I also want to align it on the web page
inside of the row, so I will make center--
sorry, I will make text align center.
Yeah, that looks much better than before.
Now let's put some space between this.
So again, we use some margin at the bottom.
30 pixels should be a good value for this.
And now, I want a nice, little yellow line
between the H2 and the text, and as I told you
in the first lecture, we will learn to put some content
on a website just with CSS, so we do that
using the after pseudo-class.
So after it's just some stuff that will appear after the H2,
such as the name indicates.
And now we can style this
just as if it was a normal element.
You can say you want it to display as a block element,
and we want a eight of two pixels,
so it will be a nice little line with two pixel sides.
And we want it to be orange, and you already know
where to find that orange, it's up here.
Paste it here, and now a very important thing:
whenever we do a after pseudo-class, we have to specify
its content, and in this case, we don't want any words
to appear, so we put a space in there.
Now the width of that line, of that box will be
another pixel, and alright, let's see how that looks.
So somethings is not right here,
because we want it centered, and of course the reason
for that is that we have to say that we want it centered,
and we do that such as we did before.
So we say we want a margin zero, and bottom zero,
and left and right auto, and now this should work.
And also we need to specify some margin
between this and the bottom.
Three pixels as well, such as we have it here.
So let's take a look at this, alright,
but we still don't have the margin that we want, and--
yeah, the reason's because this has to be margin top.
So there's a margin between DH2 after, so this block,
and the actual H2, and then 30 pixels after
that orange block we inserted,
and this is exactly what we want.
Now next up, we have this text here.
So let's define a nice paragraph style for this.
So this can also go here into the reusable competence
that will make a little sub-section here for paragraphs.
So this is called long copy, and one thing we will do
is to change the line height, which is one thing
that we learned in the typography lecture.
So line height should be between 120 and 145 percent,
and I will actually use the highest of the values,
because I really like some line height.
Now one thing that you notice is that this line
is very long, because another rule of typography
was that this line should have at most two
complete alphabets, and this is way more,
so let's make this paragraph a little less wide,
so I will say that the width of this paragraph
should be 70 percent.
Now the problem is that it will no longer be centered,
so a good idea for this problem is that instead of trying
to centering it, is to do another thing, which is this:
we say that the margin left should be 15 percent.
And why 15?
Because the total width would be 100 percent,
so if we want to center it, the remaining 30 percent
should be distributed to both sides.
So 15 percent left, 15 percent right, plus the 70 percent,
which is our width, makes 100 percent.
Okay, so let's see what it looks like.
Okay, and this is way better now.
Maybe you already noticed that sometimes I have to scroll
the webpage a little bit in order to make
our changes appear here, and I actually have no idea
why this happens, it must be something with the connection
between bracket and the browser, so don't worry,
maybe if you also experience this, just scroll your website
a little bit, and then the change will appear.
Now the next thing is to format these boxes.
And the first thing I notice immediately
is that these columns are a little too close to each other,
so I should give them some petting here,
like for example, one percent petting.
So let's go back to CSS, and now how should we do this?
So we should never, ever change anything of these classes
which come from our grid, so what we can do here
is to add another class, and then format that class,
and I will call it box, because you know,
it's like a box where all the features go.
And I will actually reuse this box probably later,
so let me just put it here.
I will call it box, and I just want to
have it a petting of one percent.
Alright, and that looks a little bit better now.
Now, these H3 elements here, they should be similar
to this one, but a little smaller, so I do
all the petting elements look similar, so that we maintain
a similar style all throughout the webpage.
So I want these three attributes to be always the same
in all these three pettings, and for the H3 ones
in specific, it should also be a little bigger
than the normal font size, but only slightly bigger,
so maybe 110 percent should be fine, and then also
some space between the H3 and the paragraph,
so let me say a margin bottom for instance, 15 pixels.
Alright, now I really don't like that this text
doesn't fit in one line, so what can we do about that?
Let's go back and maybe the reason for that
is this letter spacing, so if we take that away from the H3,
and I do this by pasting it here under H1 and in H2
headings, we will see so now the H3 no longer
has the letter spacing so let's see what happens.
Okay, now it fits, just as we wanted it,
so this is much better.
Now as for the text in here, I think this
is a little too big, actually.
It looks a bit overwhelming, don't you think so?
So what we can do here is to make the text
a little bit smaller, and raise its line height.
So we didn't give it any name because maybe
we don't need to, but you can see here, that it's a simple
paragraph inside of the box, so you already can guess
what I'm gonna do now, right?
I'm writing box and then I'm selecting
all the paragraphs inside a box, very easy.
So as I said a smaller font size, I will choose
90 percent here, and again I'm going
with a line height of 145 percent.
That will look much better.
So I think that's way more pleasant to look at.
And this section already looks great, don't you think so?
The only thing that we need to do now
is to change these icons, so let's do that.
And in order to do that, I will actually define
a new class for all those icons, and I will call this
icon big, because we will use some other icons
down the road, and they will probably not be as big
as these, so let's just call these icons big icons.
Makes sense right?
So, I can just say I want paragraphs, and here I want
some icons, so you see I'm really worried
with keeping this code organized, and you will see
when you have bigger projects,
this becomes incredibly important.
So in order to make you get used to this,
is why I'm doing this.
So let's define the icon big class, and as you notice,
it's an icon font, so it's really a font, so you can set
its font size, for instance, and I will make it really big.
I will start with 400 percent, and if it's too big,
we can always reduce that.
And I also want this icon to display as a block...
display block, so that it forces a line break,
as you already know.
I want it to be orange, so again as if it was a real font,
we can set its color, because color really means font color,
so I will again copy this orange color
that we're already used to and put it right here.
It may be a little margin between the icon and the heading,
so margin bottom, of course, and let's say 10 pixels.
And, okay, I think we can see how this looks like.
Okay, great.
Well the icons are probably a little too big, right?
So I think I'll maybe 350 percent, and let's check it again.
Yeah, that's better.
So this is really designing in the browser,
that's what I meant when I said-- when I told you
what designing in a browser was all about.
It's trying, tweaking the CSS codes, and see what
looks best and what works best in order
to make our website as good as we can.
So I think this section is ready, it looks great, right?
And see you in the next section.