Now regarding the styling,
it's of course, totally up to you how you want this to look.
Here, I will just apply some styling,
which I personally like for this forum.
And I'll start with the sections actually.
For all those sections,
I'll add a margin to the bottom of 1rem
so that there is some distance between all those sections.
And we hence have an easier time
understanding that form as a user.
But then, I especially wanna work on the labels
and the different input elements, of course.
And for that, I'll start with the label
and I'll select all the labels on this page here.
And for every label,
I first of all wanna give it a dark bluish color,
actually a blue grayish color.
And for this, I'll just pick maybe this color here.
And of course you can pick any color you want.
I'll also set display to block
because by default labels are inline elements,
but I wanna overwrite this now
and switch them to block elements
and I'll set the fund way too bold so that they are bold.
And last but not least, I wanna have a margin,
a margin to the bottom to be precise of 0.5rem
so that there is some spacing between the label
and the input field.
Now, of course, some of these input label combinations
are inside of a list
and therefore I also wanna work on that.
And on the unordered list, which I'm using,
I wanna set the list style to none
and also remove all margin and all padding which I have here
so that we don't see that there is a list.
So it would be just use it semantically.
And I think the labels
actually can use a little bit of a lighter color.
Yeah, that looks better
if they're not as dark and as strong.
I will actually also switch from margin bottom on the labels
to margin in general and at the same margin top and bottom,
and then just set a margin of zero to the left and right,
like that.
Now let's also work on the input elements.
For this here, I'll target my inputs and also the text area
and also to select element.
And they will all receive the same style here.
And the style is that the font should be inherited
so that I'm using the font style,
especially the font family, which I'm setting into body
instead of that browser default font,
which is set otherwise.
And I'll give them more padding, maybe off 0.5rem
and set the border to one pixel solid.
And then here, I wanna use a gray bluish color.
So I'll start at gray, but it doesn't really matter,
and then pick like does a light gray bluish color.
I'll also set the width to 100% and set display to block
so that these elements
are now also treated as block elements.
And I'll set the border radius to four pixels
to give them some rounded corners.
With that, I'd say that looks a bit better.
However, you notice that the width is a bit off
and that's something which we can fix
by changing the box sizing to border box.
So that the actual width, which we're setting
actually does respect paddings
and especially the padding of the form around this box here
and hence it does not stretch over that padding
off that parent box.
And I think actually the labels will look better
if I don't make them bold here.
Yeah, that's definitely looks better.
So this is taking shape.
For the text area, I actually wanna add the rows attribute.
So here I'll add rows and set this text area
to let's say, seven rows so that it's a bit bigger,
maybe six.
And I also wanna disable a resizing.
And for this, we can select the textarea here
and set resize to none.
I also wanna apply some special focus styles.
So if our input is focused or to text areas focused,
then I wanna change the styling.
And I wanna change the background color a little bit
and use that dark blue grayish color,
but use a way lighter version off that maybe here,
so that if we select the input,
we have this bluish background and yeah,
that doesn't look too bad.
Of course, we now got an issue regarding those inputs
where the labels should be in line with the input element.
And for that, we can add a class
inline-control for example,
but the class name is up to you.
Where I'll set to display to flex,
and that will move those elements back into one line,
even though we're dealing with block level elements,
but Flexbox is all about positioning
and aligning such block level elements along one axis.
And the default here is the horizontal axis.
So elements we'll move back into one line
if we use Flexbox here.
So I'll set this to display: flex.
And then in the index.html
we just have to apply this inline-control class
to the parent elements off the input label combinations
that should sit in one line.
And that for example, would be our radio buttons.
Here on the list items that hold the input and label,
we have to add that class
so that Flexbox is added on this list item
because Flexbox, as you learned, affects the child items.
And then we add this class not just to this first list item,
but also to the second and to the third one.
And we also added to this section,
which has to accept terms checkbox.
Now that's of course not the final look we want, though.
We also have to change the size.
So I'll also select all the inputs
that are inside of an element
with the inline-control class on it
and I'll set the width to auto
so that we don't have that width of 100% here.
And with that, that looks better.
And now to make sure
that they are really sitting next to each other
and not a position like this,
I will also remove the margin from the labels
that are inside off an element with inline-control on it.
So that margin is set to zero
for labels inside of such an inline-control element.
And now that looks better.
We can also give that label a little bit of margin
to the left now,
so that there is some distance to that checkbox
or radio button.
And I would say that looks quite decent here.
Now, I definitely also wanna style those buttons though.
And for this, you might've noticed
that the buttons actually don't have the same look
and we can achieve this
by selecting the two buttons individually,
at least for some styles,
but they all will have some common styles
and therefore or first of all, select my buttons as a whole.
So all the buttons on the screen
and give them some base styles.
For example, that the font will be inherited,
that I want to have a border of one pixel solid
and then this dark gray bluish color,
maybe even a bit more blue here.
I'll also add a padding of 0.5rem, 1.5rem
to have some spacing around the text instead of the button
and set the border radius to four pixels here
and set the cursor to pointer
so that we get this hand cursor
when we hover over the buttons.
But then we have differently styled buttons
and we can reflect this
by assigning different IDs to the buttons
and targeting those IDs with CSS,
or if it would be possible that we use those button styles
for our buttons on the page as well,
even though here in this demo,
we only have two buttons overall,
then we could also use classes.
And I'll use class selectors here,
but again, you could also use ID selectors.
We just need some different selectors
for the two buttons we have.
And here I'll add a button filled selector
and I'll add a button empty selector.
And for the button field selector,
I wanna set a background color of that blue grayish color,
which I used for the border of the button as well.
And I'll set the text color here to white then,
and for the empty button,
I'll set the background color to transparent
so that there's no background,
but I'll set the text color
to this dark blue gray color here, like this.
Now we probably also want some hover styles
and for this I'll select the filled button
in the hover state,
by combining this button field class selector
with that hover sudo selector,
and then here we can set the background color
to this color we used before,
but now use a lighter version maybe,
and do the same for the border color here.
Use that same lighter color now.
And for btn-empty, when hovered,
then I wanna set a background color
of a very light blue gray, something like this maybe.
Let's see if that works.
And now we just need to assign those classes to the buttons.
For this on that first button,
I'll add a class of button empty
because that should be this empty button.
On the second button, I'll add button filled.
And if we now save this,
we got those buttons with the appropriate hover effects.
Now the buttons also should sit on the right here
and we can achieve this by targeting section
which contains the buttons,
and then we can either use Flexbox on this section
to control the positioning of the child elements,
or since buttons are inline elements, as you learned,
we can also adjust you was text align,
and that's what I'll do here.
And for selecting this section, I'll use an ID
and just name it, form-actions.
The idea of course is up to you and then install CSS,
maybe here after the button selector,
I'll target form-actions and set text-align to right here.
And that will move the buttons to the right, like that.
And this doesn't look too bad.
That's a nice form, if I try to submit it,
I also get my validation here.
And with that, we got this task solved.