Now that we added this form element,
we can, of course, also use it for styling.
We don't have to, but we can,
because even though the form element
is a special element in the way that it interacts
with its child elements,
that it establishes this connection,
even though that's the case,
we of course can still work with that form element
as we do with any other element in the body.
We can target it with CSS and assign our own styles.
It is worth mentioning though, that by default,
the form element has no styles.
We don't see it on the page,
whether we have a form element or not,
does not change the look of the page.
It just changes to behavior of this forum.
But now I want to change the look.
So in Styles, CSS,
I will now also select the form element
by its tag here and then there
it's up to you how you want to style it.
I'll give it a width of, let's say
30rem and a margin of 3rem and auto to center it.
And I'll actually remove this margin here on the body.
Get rid of that.
And on that form, I'll give it
a background color off RGB, 255, 255, 255.
Which will be a light color.
And for the input here,
there, I'll actually give it a width of 100%.
And percent is a special unit in CSS,
which basically means that the width
of this input will be 100% off the width
of the parent of that element.
So in this case off the form,
since input is inside of forum,
the parent width is now used.
So 100% of the parent width which is 30rem.
I could set this to 30rem here as well,
but that means that whenever I changed the width
on the forum, I also have to change it down there.
If I use 100%, instead,
I can change the form width,
and the input with changes with it automatically.
Now on that forum, I'll also add
some padding of 1rem so that we have some
inside spacing between the border and the content.
And speaking off the border,
even though we have no border color,
we of course have a border,
which we'll be able to see
because of the contrast between this background color
of the form and the overall page background color.
And therefore, I'll give this border radius,
I'll give that form a border radius,
of six pixels to have some rounded corners here.
And with all of that,
now we got this box here
with the form inside of it.
And in there we got our input element.
Now I see that the spacing here
is actually not the same on the left and the right.
And the reason for this
is that the input here is using
the wrong box sizing.
We need to change it to box sizing,
border box and save that.
And now that is set correctly.
Now that's it for the form styling,
But one important thing is missing here.