Jonas: All right, let's now finish working
on our form by now styling all the input elements,
and the first thing that I want to do
is to style these labels,
so basically putting them on top here,
of the inputs, and of course, making them a lot bigger.
Now, notice how I didn't give
all of these form elements here class names,
because they already have so many attributes,
and so adding a class on top of that
would make them even more confused,
so that's why, usually, when I build forms
I simply select the form,
and then from there I simply use the Descendant Selector.
So cta-form, and so we will style the label.
Let's duplicate this here.
So we will also style the input
and also the select element,
and actually also here, the button.
So this button already has this class, but as you saw,
it doesn't actually look like any of the other buttons,
and we will see soon why that is,
but you can, if you want, already start thinking
about that if you feel like it.
So anyway, we're gonna start with the label, as I said,
and to give it its own line, all we have to do
is to set it as a block-level element, right?
So that will then put the label
and the input, it, on its own line.
Then let's increase the font size, of course,
to something that we can actually read,
and the font weight a little bit bigger
but not too overwhelming, so just 500,
and a little bit of margin to the bottom.
So that's a very nice improvement already,
and of course they still work as before.
So moving back, now it's time to work on these ones here,
and especially, of course, increasing their size,
so increasing their width
and also adding some padding inside of them.
So first of all, we can give them a width of 100%
which will have them occupy their entire parent,
then let's add that padding that I just mentioned
but not too much, just 1.2rem here, so 12 pixels,
and then we can also increase their font size,
so the font of the text that we will write
inside of the input field.
So that's a good start, I think, for now,
and then from there we can improve it even further, right?
So this looks better already, but if you look closely,
you will notice that the font family here
inside of these two fields, is actually different
from this one here, so what this means
is that these input fields, for some reason,
do not inherit the font family
from the body element where we defined it, right?
So all of the other elements,
remember, they all have the same font family
because they simply inherit it
from the body element where we defined it, right?
But again, input elements,
and also this button here, and also this select one here,
all of them do not inherit that, all right?
However, we can actually force these elements
to also inherit the font family.
So, how can we do that?
Well, there is yet another CSS keyword
that we haven't learned about, and it is called inherit.
So basically what this does is exactly what it says here,
it says so, that it should inherit the font family
from whatever parent element is relevant
in this case, all right?
And we can use this in all kinds of situations,
so not just for a font family
but let's see, and notice how it is now really different.
Of course, we can see that like this.
So if we turn it off,
see how it changes dramatically, right?
But as I was saying,
we can use this keyword also in different situations.
So for example, remember how here in the secondary heading
we set the color here to this one?
So the same one that is already
in its parent element cta-text-box, right?
Because if we didn't have this,
then the heading-secondary would simply use the gray color
that it had before, right?
See that?
So it is now again gray.
However, we could also use color: inherit here again,
because cta-text-box is the parent element
of this heading-secondary in this case here,
so the one that's inside of cta,
and so if then here we set color to inherit,
it'll automatically inherit that color,
and so you see now it's back to this color.
And of course if we set this one here to red,
then all the text would become red.
So this one, of course, and yeah, this one as well,
because we forced it to inherit the color
from its parent element.
So a very, very handy and useful keyword
that you should keep handy in your mind basically.
But moving on now, let's remove the default border
that is present on all input fields
and also to decrease the contrast a little bit
between the background color of the cta box
and the element itself,
I will add some background color to this one,
so just our very lightest version here.
So here, and then also let's add some border radius,
so we have been using 11 and 9 pixels,
and for this one I'm going with 9
because it is a smaller element.
Okay, so that looks even better than before.
Now there's just one small thing that we can do,
which is to add a very, very small
and very subtle shadow here to these elements,
which is something that I like to do a lot on input fields.
So let me just show that to you
so that you can see the difference that it makes
which is quite significant, even though it is quite subtle.
So box-shadow, and of course, horizontally
we don't want any, and also vertically just one pixel,
and a blur, just two pixel, and then let's make it be black.
Let's choose, well, maybe 10%.
All right, and there you see it, so it's hard to see
but probably on your computer you can see it just fine,
and it does make a lot of difference actually here.
All right, next up, one thing that we can also style
is the color here of this placeholder,
so right now it looks quite dark,
it almost looks as though this was the real content.
So I always make this a lot lighter,
and we can do that by using a new pseudo element.
So cta-form input, so basically the same as here,
and then we can select the pseudo element of placeholder.
So this one.
So remember, pseudo elements are basically elements
that we can select and style,
but which do not really exist on the page.
So like a first line, or a first letter,
or well, the placeholder.
And so here let's use a light color
and it doesn't have to be accessible, in this case
let's just go with this one.
So again, one of these simple ones to select,
which has the exact same value in all the three,
and so therefore in all the six positions of the hex code.
So that's a lot nicer,
and now let's talk about this one here.
So this box that opens up here actually depends
on the operating system that you're using.
So if you're on Mac, yours should look something like this,
but on Windows it will look completely different,
and I believe there's not really a way of styling it
but of course we can style this part here,
and in fact, it is almost the same as the input itself,
as the input element,
and so we can simply add that here to the list.
So cta-form select.
Okay, so, nice, so it looks exactly like these two now,
in terms of size, it has the same shadow,
and then when we open this now,
it actually has the same width as the select element,
but again, the colors and all that stuff here
we cannot manipulate, it will simply depend
on the user's operating system.
All right, just one thing that you might notice here
is that the text is completely black, and so once again,
this one here doesn't inherit the color that we select
for our document, and the same is actually true here.
So if we write something here,
notice how the text is completely black,
and so we need to force the color here
to also get inherited, right?
So just like we did with the font family
we are now also forcing the color to get inherited
from the body.
And so with this, well, actually it's not inherited
from the body, but in this case it is inherited
from this cta box here where we set the color to this brown,
and so indeed here it is now brown,
and also when we write here, it's no longer black.
And now finally let's talk about our button here.
So this button here doesn't have any styling whatsoever yet
even though we did actually add
the button class to it, right?
So why is there none of the styles from this class
applying to our button?
Well, let's answer that by actually going there,
and so here is the answer.
So this style here, so this CSS rule
only applies to buttons,
so to elements with the class of button that are links,
and so remember that this means
that they need to have the href attribute, right?
It also applies to buttons that have been visited
but of course, that also doesn't apply to our button here.
So this button here does not have any href attribute,
and so therefore it is not selected by this and not by this,
and so that's why it doesn't have any of these styles here.
So to fix that we can simply add that to the list here.
So basically just the simple button
but without any of these pseudo classes,
and so now it should get at least some styles.
So that looks different, but of course,
still far from being perfect.
So first of all, let's remove the ugly border here,
and we also need to give it the hand cursor
and so that we can actually also do here,
even though these other buttons don't need it,
but still there's not a problem in putting it here
for all of them.
So no border and the cursor should be the pointer,
let's just write that here for the btn itself.
Now, right?
And also the font family,
I'm not sure if it is being inherited,
I think it does look like it is.
We can just try it here, font-family inherit,
but yeah, that does look the same, I think.
But anyway, let's actually leave it there.
All right?
So that's it for the button,
so for the general styles for this button,
and so now we can come back here
and add some more styles here to really fit it
to our specific needs in the form,
or we could also give it here another class
and style it again in the general.
So for example, if we had another form somewhere else,
we could then reuse that button there,
and actually let's do that, let's call it btn--form.
So we don't need this one, and we don't even
need the select one because it is already here.
So let's do that after all these.
So btn--form, and here what I want to do
is to use the exact same background color
as we have here, as the text color.
So not that orange, because that, of course,
would become invisible
on the already orange background color.
So here we just use this one,
and I think I haven't yet added that to our list.
No, I did not.
Okay.
Then for the color to not contrast too much with it
because right now it's actually black,
so we need to set it anyway, but let's not set it to white
but to this very light orange,
and then we also need to now change the padding.
Well, actually let's do that later,
and let's check it out now, so it looks like this.
And why do you think that the button is so high?
So basically that it is occupying all this space.
Well, the reason is that this button is, right now,
a grid item, right?
And by default grid items stretch to occupy
the entire grid cell, remember that?
So that's important to know
because this is the reason why it looks this big,
so let's try to fix that
by vertically aligning it here to the end,
because what I want to do is to give it
the same size as this input field here,
and having it also aligned here to the bottom with it.
So not to the top, but really with this one here.
So let's try that with align-self.
So align-self, because this is a grid item,
and to vertically align items
we use the align items property,
but here we don't want to set that on the container
but simply on this button,
and so that's why it's align-self,
just as we have learned many times before.
So setting it to end should move it down there.
Yeah, nice, but it is still
a bit bigger than this one because, by default,
the button has some padding.
So the padding right now is coming from right here.
So top and bottom, the padding is 1.6,
but on the form elements, so, on the inputs it is only 1.2,
and so if we set the padding to 1.2,
this one should then have the exact same size,
so let's do that here.
Padding 1.2rem, and the other side doesn't really matter
because it will also stretch all the way.
So let's just put it at 1.2, and there we go.
So that looks a lot more natural, doesn't it?
Having the exact same height as this one.
So really, really nice, really beautiful,
we're almost ready here, there's just one important thing,
or actually two or three,
but what I just remembered is that we need
to get rid of the fixed height that we set
for this container.
So way back in the first lecture
we set the height here to 50rem,
so we need to remove that now because,
of course, we want the content to dictate the height
and not have it fixed.
So remove all that, and that is a lot better.
So now the spacing here is the same all the way
around this form element.
Next up, let's take care of the hover state on this button.
So that's btn--form, and here let's actually change
the background color to white, and then the color itself,
let's make it the default color
that we have been using all along, so 555,
and the transition is not necessary to define
because it is already here,
which the button is also part of, right?
And so this should be enough to make this effect work.
Oh, and actually it did it, like, permanently.
So let's see what's happening here.
So that's some kind of conflict
between our selectors right now.
Oh, actually we just forgot to write hover here.
So, no conflict after all.
So now it should work just fine, and yes, beautiful.
So almost ready here, but just one final thing
which is these so-called focus states.
So when I click here, you see that this gets focused,
so that's this blue ring here around this form,
and the same is true here.
Well, not here, well, actually yes,
and the same here as well,
and actually it should also happen,
well, actually not,
because once we click them,
we move back to the top of the page,
but if on the keyboard we hit the Tab button,
then you see that they also get focused,
and as I hit again, it moves to the next link,
and then all of them get this blue border,
and that's because of accessibility,
because having this outline
around the currently selected element makes it easy
for users who can only use a keyboard to navigate the page.
So now when I hit Tab again, it will move to the next one,
and then I know exactly
which is the currently-focused field, right?
And the same also for the button.
Now, many people think that this outline looks ugly
and it is true that by default,
the default one looks quite ugly,
and so we can actually remove that default one,
which is what in the past basically everyone has been doing.
So also here in our general, let's go here to the end,
and so what we do is to select every single element
and then on the element we can use the focus pseudo class.
So focus is a little bit like link, or visited, or hover,
it's just another state,
while in this case it is just focus,
and of course we could define this here
individually on links, or on buttons, or really anywhere,
but when we want to set the same focus style
basically everywhere on the page, we just do it right here.
So it's a little bit like the global reset,
but for focus states.
So that blue focus state that we see
outside the input elements and links
is because of a property called outline.
So that's another new property,
and this one is similar to a border,
but it is basically more outside of the element,
and it's also not part of the box model.
So what many people have done in the past
is set outline to none and call it a day,
but that, of course, is an accessibility nightmare
for people who would rely on just using their keyboard.
So you see that, indeed, the outline is gone now,
but as they navigate the page
by hitting the Tab key on the keyboard,
I don't really know where the focus state is right now.
So I tapped it again, but where is it?
Is it maybe here or here?
And if I tap it again, well, it somehow goes back
but we don't really know where it is, so I keep tapping it,
but where is the focus state?
So that is really, really bad for accessibility,
so please never do this,
so just setting the outline to none.
So instead what we can do is to still leave the outline
at none, but then show the user
some other kind of focus indicator that looks a bit nicer,
so one that we actually like.
Now, there are multiple ways of doing that,
so we can actually still use the outline property,
for example, a dotted border, because we can style outline
just like we can style border.
So we can say 4-pixel dotted, and then this one here,
and then we can even define an offset.
Let's say 8 pixels, okay?
So let's see what happens then with the focus states,
and so that looks like this.
So you see, now it's here, then I hit Tab again,
and so it keeps moving from one link to the other one.
So that's the 4-pixels dotted,
and then with the outline offset of eight pixels.
However, what I don't like about this
is that it doesn't wrap around here,
the rounded borders of the elements, you see that?
So it's basically still just a square,
and here that's not a problem,
but then here again, it doesn't look so nice,
and so there's actually an even better trick
which is using a box shadow.
So let's turn this one off and this one off,
and instead use a box shadow trick here.
So this trick is gonna be similar
to what we did before with this outline button here.
So remember here we used it to add a border inside,
so we set everything to zero,
and then just set here the blur or the spread to something,
so here we're gonna do the same,
but without it being inset.
So still outside of the element, not inside,
but still it's gonna be zero in all directions,
also no spread, but just scale it a little bit,
let's say also by eight pixels,
so 0.8rem, and then, as for the color, let's actually try
also this one but maybe with some transparency.
So I click here at the top, and usually it should be black,
there should be some black text,
and now let's set it to, like, 50%.
And so you will see that this is going to look a lot nicer.
So you'll see that.
Now here it's actually quite invisible,
so we will have to fix that so you can barely see it,
but now here it is actually quite visible,
and this looks a lot nicer
because it does wrap around these corners,
because in the end it is really just a box shadow.
Now, down here in the form
we will have to change it, for example, to a white color,
so let's do that.
So I will just copy this code and go here,
and define that here by the very end.
So inside of the cta I can then still select everything
and make the focus a bit different.
So this we don't need,
and let's use our very, very light orange.
So that is, well, it's this one here,
somehow it wasn't on the list,
but of course, we still need to give it some transparency,
and let's again try a 50%.
And so we're almost done here.
So you might think
that this is a small detail that we should not worry about
but actually accessibility is really important.
So these focus styles are really something
that you must define in your own page, unless,
of course, you want to keep
those ugly-looking blue outlines,
but those one I don't like
and most people don't like them as well,
so we just do something like this,
and so now this is a beautiful outline here
and it makes the focus state really visible
and helps the user know where they are right now
on the page.
All right, and that's it, that's all I had to show you
for forms and for formatting them.
Now, there is a lot more things that we can do
and that at some point you might have to learn, for example
how to format check boxes, which are quite common as well,
but that is a bit outside of the scope
of this course because that is actually a bit tricky.
Check boxes are very hard to style,
and so yeah, I'm leaving that for another time, let's say.
All right, so this is the basics
that you need to know to get started
with building your own forms,
and so hopefully all of this made sense to you
to you so that now you can start doing just that.
Awesome.
So with this we are almost finished with our project,
all that is left to do is to build the footer.
So this will be the last part of this section,
and so, if you're ready for that, let's go there now.