Original subtitles

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 they build forms,

I simply select deform,

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 at 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 going to 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 each 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.2 rem 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 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 inherited 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 to 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 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 will 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 texts 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 of 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 nine pixels.

And for this one, I'm going with nine

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 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, that 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 well 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 opened this now,

it actually has the same width as the select element,

but again, the colors and all that stuff here,

we can not 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 as 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.

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 two 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 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 now, 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 button 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 button 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 think I haven't yet added that to our list.

Nope, 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.2 rem

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,

it 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 50 rem.

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 button 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 5, 5, 5.

And the transition is not necessarily 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, at 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 tap 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 tap 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 year 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 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 four pixel dotted.

And then this one here,

and then we can even define an offset.

Let's say eight 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 tap again.

And so it keeps moving from one link to the other one.

So that's the four 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 going to 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 going to do the same,

but without it being inset.

So I was still outside of the element, not inside,

but still, it's going to be zero in all directions.

Also, no spread, but just scale it a little bit.

Let's say also by eight pixels.

So 0.8 rem.

And then as for the color,

let's actually try also this one,

but maybe with some transparency.

So I click here 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'll just copy this code

and go here and to define that here, by the very end.

So inside of the CTA,

I can then still select everything

and to 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 data 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 now, 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

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 the section.

And so if you're ready for that, let's go there now.