Now let's talk about styling.
You might notice one thing.
If I enter something in that input field,
actually a Sans Serif font gets used here for me.
It clearly is a different font
than what I have here for the label,
and the same for the button.
The button has a different font than I have for the label.
And of course, in general,
we have some default styles being applied here.
The button looks like a button
because it has this slight grayish background
and it has this hover effect out of the box.
And these are defaults, which will differ
based on which browser and operating system you're using.
But of course, these also are defaults,
which you can overwrite to style this on your own.
And that's what I want to do here.
And for that install CSS,
I'll start by setting my own font family.
And therefore I'll go to body
and add a font family here.
But, I now could just use Sans Serif,
but I want to use a different font family
and therefore I'll visit fonts. google. com.
Now here, you can pick any font family you want,
but I'll go with Roboto again.
So I'll select that and here select
the regular style with a weight of 400
and the bold style here with a weight of 700.
And then as we did it before in this course,
I'll copy that code here,
go to index HTML, and add those link tags here
above my styles link tag
and press the auto format shortcut.
And now installs CSS,
I'll set Roboto as my style, as my font family,
and then specify, send Sans Serif as a fallback.
Now, if I do that,
you'll notice that the label now is also Sans Serif.
It uses this Roboto style,
but it might be a bit hard to spot and not be obvious,
but the input text font here
and the button font is not Roberto.
And since it's not that easy to spot,
we can verified by inspecting it with the def tools.
We see that there are a lot of default styles applied
and we especially see that for the font,
it's actually Arial here, in my case.
And depending on which browser and operating system
you're using, you might have a different style here,
but it's Arial, not Roboto
and that's not the style I want.
Instead, I want to use the same font family
for all my elements,
including these HTML input elements and buttons.
And that is something we can achieve,
but we need to override these browser default styles.
Now these browser default styles
override my global font family on the body,
because of specificity.
If I inspect this button again,
we see that the user agent style sheet here
targets the button text selector,
and then sets the font CSS property as a whole,
which allows us to set font size and so on in one go.
And then it sets it to Arial.
Now my font family, which has set on the body,
is inherited but is overwritten,
as you can tell by the strike through effect,
because targeting a specific element
by its tag selector here as the browser default does it,
has a higher specificity than inheritance.
That's what you'll learn before in the course.
And because that's the case, we need to override it again.
And for this here,
we can go to our button and set the font family,
or actually the font as a whole to not just override
the font family, but also the font size and so on.
And now we could specify this manually step by step,
the font CSS property then wants to know
which font style we want, which font size we want,
and then the font family.
So we could set it like this,
and now the button would have that same style
if I inspect it.
Now, we see that gets applied
and you can see the difference if I toggle this here,
you clearly see that the font size
and actually also the font family,
though that's not as clear,
but that both changes.
But, if I just want to use the same style as I have on the
rest of this page, we can also set font here to inherit.
Which is a special value, a special CSS value,
which is available for most CSS properties.
With inherit, you say the styles which you would inherit,
should actually now have a higher specificity
than the browser default styles.
So we overwrite the browser default styles
for this font CSS property here with the inherited stalls.
So the default styles applied by our own style sheet.
And if I set this, we also get is different font family
and this different font size.
I actually never do set my own font size here, but here,
the default in general is one rem, or 16 pixels,
and they offer that as then assumed as well.
And therefor, setting font inherit
is a very common thing to do on buttons
and also input elements, where I'm now doing it as well,
so that all these elements use the exact same font
as you do it on the rest of the page.
Of course that's not a must do,
but it is something you could consider doing
if you want to have to same topography
and the same font across your entire page.
Now with that,
we got the most important and tricky part out of the way.
Now I just want to apply more styling
to both the input and the button here.
And I'll start with the input.
For one, some spacing between
the label and the input would be nice.
Some spacing inside of the input would be nice.
I also want to change the border and make it more grayish.
And I want to change the text color here.
And I also want to change the focus style,
which we have when this input gets selected.
And therefore, for all of that, I'll go to this label,
first of all, and add a label selector.
The exact position does not matter.
I just try to replicate the order of elements,
which I also have in the HTML document.
And there I have a label before I have an input,
but that's not a must do in CSS, but then here,
I'll add a margin bottom off dot five rem,
so half a rem,
and then for the input here,
I'll set the border to one pixels solid
and then pick a grayish color
for this all start with
a black color and then use a light gray here.
And I'll add some padding, some spacing,
some internal spacing at this input
of, let's say, dot two five rem.
So just a little bit of padding
and I'll change the text color with the color CSS property.
And there, I'll take does light gray color
as a starting point,
but then I'll hover over it and pick a darker gray color,
but not black, just dark gray.
And with that, that looks better.
Now the margin bottom is not applied to the label because
the label also turns out to be an inline element.
And as you learned for top and bottom margins,
there, we have some special behavior,
basically that top and bottom margin is ignored.
And therefore, to change this,
I'll set the display to block here for the label,
so that the bottom margin does have an effect,
which it does now.
Now I also want to change that focus style
of the input, so when it's active.
And for this,
we can use another pseudo selector.
On the input element, there is the focus
pseudo selector targeted with colon focus.
So we learned about colon hover and colon active
before in the course, now we have colon focus
to style this input when it's being focused.
And here, I now want to
target my background colors CSS property
and actually, choose a brand new color.
Maybe we use a bluish color here or purple,
maybe a light purple here as a background color
when this is targeted, and I messed this up
so let me fix this.
And I'll also change the text color and I'll use the same,
whoops, use the same color there,
but of course then move to a much darker purple.
And I'll also change the border color then,
and use that same darker purple for that.
And of course you can style this however you want.
But with that, if we save this,
now we have this effect when we focused as input,
and I'd say, that's now much easier to see.
Now let's also style this button.
And for this here I have this button selector
and we're already inheriting the font.
I also want to overwrite the background color
and the border now, and also change the padding.
And for the background color,
I'll use that dark purple here.
Then as a text color,
I'll set white to have this contrast white color,
and I'll just use this white shortcut,
this a built in white color identifier here as a value.
Then for the border I will set this to one pixel solid
and use that same dark purple
and then add a padding.
And here I'll add dot five rem top and bottom,
and let's say one dot five rem left and right.
And if we saved this, we got this button now.
Now that's not the finished button, though.
I'll also give it some rounded corners with border radius,
all four pixels, maybe.
And I also want to make sure that
if I hover over this button,
the cursor changes to this hand cursor
and that's something we can do by setting the cursor
CSS property and setting it to a value of pointer.
Now you've got different values which you can use here.
There are a lot of values actually,
but pointer is this hand icon.
If I save that now it changes to this hand
if I hover over the button.
I also want to have a hover effect in general.
And hence here, I'll select this button
with the hover pseudo selector
and change the styles that are assigned
once we are hovering this button.
And here, I want to change the background color
and use a dark purple as a starting point,
but then she was a lighter version,
a slightly lighter version of
that and do the same for the border color.
Here I'll then use that same lighter purple.
With that, if we saved this
now that we have this slight hover effect.
And that's it for this moment,
this is also not the final demo
for in which we're going to build.
This is just an introduction to forms and how you can style
the different forms and form elements.
Now, did we got this all out of the way,
let's come back to the HTML elements in general
and let's understand which other elements
and input types we have at our disposal, as well.