Voiceover: So, let's use CSS to style our contact form.
So, back here, I notice two things.
First, that these elements here don't
fill, 100% of their column.
And, the other thing, is that we
clearly don't need all the entire width
of the parent element of this row here.
'Cause there is way too much space
here between the labels and the elements.
And this doesn't look good. So, let's fix that.
So, back in our HTML file, this will be
the form and the class that we want
to format, the contact form.
So, add a new class, and some white space.
That's all this.
Delete this as well.
Alright, so let's say we want a width of only 60%.
This should be much better.
And then we also want to center that thing,
and we could use that technique where
we say that we want the left margin to be 20%,
which is half of the difference between 100 and 60.
But in the case, I want to format it the other way,
that I showed you before.
Which is saying that the margin
top and bottom should be zero.
And auto on left and right margin.
So, this will center this contact form
inside of its parent element.
And now I want to format my other form elements.
So, input and the other one was
the select element, and the text area.
And the first thing, I want them to be
100% wide, so that they fill their whole column.
And I also want them a little bit bigger,
by adding some padding inside of them.
Let's say seven pixels, that is a number that I like to use.
And also a little border radius
of let's say, three pixels.
Alright, let's see, what we got.
Okay, now we have some strange border here.
And we also have another thing, that we don't want,
which is this input element, and this one,
also fill the whole content.
But, in fact, we only want these two.
So, how do we achieve that?
Let me go back, and let me show it to you.
So, the one step we want are the ones with type text,
and type email, right?
So I will show a new selector in CSS now,
which does the following.
With them, we can select all input elements,
which has the type text.
So we say type should equal text.
And then we can say the same thing with email.
And, alright. It works.
So the bottom is back to normal
and this check button as well.
And now we gotta get rid of this weird border here.
And that should be quite easy,
just say border one pixel, as always,
and solid, and some grey color.
So, the color picker here, and let's say,
it shouldn't be too dark.
As always, we want something very subtle here.
I think this one is good. CCC.
That's also a grey color that I like to use a lot.
Alright, let's see. Okay, great.
You see that this select element here,
doesn't have the width of these two elements.
And, in fact, it's very difficult to
style these select elements,
and so we'll leave it just as it is.
Now we want this text area to be a little bigger,
and we want this send button here to
look like the other buttons.
I mean, like this button, like the full button.
So, let's go back.
So, I'll just say text area
and the height of 100 pixels.
And now for the button, we do a very simple thing now,
so we go back to the original buttons that we defined.
Oh, here they are.
And since we want them to look
exactly the same as these buttons,
we can just add a line here,
and then, they will be styled the same way.
And that button down there,
is an input, with type submit, right?
Do you remember?
So we just have to do this,
now let's copy this, because we also want to have it here.
So now it will look exactly like this full button.
Though here, of course, it is an equal, not an underscore.
And then we also, of course, want this hover effect here.
So let's place it here as well,
change that to equal,
and let's check this now.
Alright, this looks good.
And now we have to make this hover effect here work as well.
And that should be easy enough,
and back here, we just put, this code.
This one, of course.
Put it here and say hover, and the same thing with active.
And that should do the job.
Alright.
Okay, great.
So this looks, already, pretty formatted, right?
Maybe one thing that we can do here
to make this look even better is to
add some space around this checkbox here
because I think this looks a little wide space here.
You can actually see this here with those labels.
They look a little weird here.
So, I'm going to do that.
And the other thing is that I want to
get rid of these blue borders that will chromats to this.
So, let's do these two things now.
First, I add a checkbox,
and that's pretty easy.
Just say input and then, of course, type equals checkbox.
And I want some margin on maybe all sides,
so we didn't do this for a long time.
So, at the top I want, let's say 10 pixels,
at right side, I want some five pixels,
so between the checkbox and the text.
At the bottom, also 10 pixels,
and on the left side, no margin at all.
And the last thing is to get rid of those borders,
when we focus on those elements.
And the best thing of doing that is to
get rid of it for all elements.
So we have a lot of zero class here, which is called focus.
And we just say, outline none, and then it should go away.
So, check this out.
Alright, no focus here anymore,
and we have some distance here,
between those elements, which looks much better now.
So, yeah.
Now there's only the footer left to do,
and we'll do that right in the next lecture.
So, see you there.