So for the moment,
we'll still stick to the front-end part of the site here
to the styling,
but we'll switch to a different style file
to the forms CSS file to be precise.
Here I now want to set up some general form styles
that will be applied throughout this entire project.
So not just to the sign up page,
but also to forms on other pages.
However, we'll not just work on the general form styles,
but also on the auth forms specific styles.
And those styles will go into the auth.css file
as they should only affect the signup and login pages.
And I am including auth there
this auth.css file,
but I won't include it in other pages.
And actually I'll start in the auth.css file here
to set up the auth pages specific styles.
For example, there, I want to ensure that at this h1 tag,
that I have there has its text aligned to the center.
And
there, I also want to ensure
that I changed the color of this h1 element
to color gray-300.
And with those changes made, this looks like this now.
I also want to center this overall form
and the form elements
and for this all target the form
still here in the auth.css file,
because I don't want to center all forms on all pages.
I just want to center the auth forms specifically,
and there, I will actually
restrict the max-width to 25 rem,
so that it's a bit narrower.
I'll add a margin
where I will use space-eight.
So this biggest space I defined to top and bottom,
but auto to left and right to center to form.
I'll add a padding
of space-four,
so this will be one Ram of padding
and I'll give it a background color
of var color, gray 600.
So I'll use a dark gray background color for this form here.
I also will add a border radius, not a border,
but still a radius,
which we will see because we have a background color
that differs from the background color of the overall page.
So we will see the border
even without giving it an explicit color.
And the border radius here will be that border radius,
medium VLU,
and last but not least,
I'll also add text align center to center all the
inline elements in that form.
And as it turns out,
labels and these input elements, all our inline elements,
as you can clearly tell by the fact
that they sit next to each other.
And actually also the button link,
our inline elements,
they just are in new lines here
because just like the label input combinations,
they are wrapped by paragraphs
or the button is not wrapped,
but the elements in front and after it
are wrapped by paragraphs.
And paragraphs are block elements and force line breaks.
That's why we have these line breaks in there,
but why the elements in the block elements
like the inputs, labels, buttons and anchor elements
are all inline elements.
And therefore they will be affected by text align center,
we can define it on the form because it's inheritable.
So all the elements in the form will inherit it.
And hence, if we save that
and we reload this form now looks like that.
Now I would still argue that we can
improve the overall look here.
For example, by changing this anchor element
down there a little bit,
to be less prominent,
to instead stand back a little bit more.
And I also want to enforce these labels and inputs
to have their own new lines each.
Now the ladder will be general form styles,
which will add to the form CSS file.
The only auth specific styles left here
are the styles affecting the anchor element
at the bottom of the form.
And therefore I'll start with that
to finish working in this auth-CSS file.
And I'll give this anchor element in this form
on the auth pages color,
which is color primary 200,
which is a quite whitish color
and upon hovering on it,
which I can define like this.
And also the active styles for it.
There I actually want to switch the color
to color primary
400.
So again, here, I'm combining multiple selectors,
the selector that selects anchor elements inside of a form
when hovering on it or clicking it
to then set a different color.
Here, I'm also already
using such a combinator where I look for
descendant anchor elements inside of form elements,
and then apply this color to such elements.
And you'll learn about all these different selectors
selector combinators
and selector combinations,
early in the course.
So definitely revisit those sections,
if these CSS selectors are brand new to you.
With that though,
this link now stands back a little bit more.
Now let's work on the general form styles.
And here I
want to start with the hr element in there,
this horizontal line, which I have in there.
I just want to ensure that I
give it a border color that is using the primary color,
so that if it would be using this in other forms
on the page as well,
I also would have a slightly different look for it.
I'm not using the dark orange primary color,
but one of the lighter ones,
and I'll set a margin here.
So as I'm spacing to top and bottom and left and right
of space-4.
Explicitly all the to left and right,
and not just top and bottom,
so that this horizontal line doesn't spend the entire width
of the form because I think it looks a little bit better
if we set it like this.
So now we've got this divider here
and now I want to ensure
that we have line breaks after the labels.
And of course,
I also want to change the look of those input elements.
Let's start with the labels
and I'll target labels in general,
because throughout this page,
I will always
want that look for all the labels in all my forms.
So there's no need to go for classes or anything like this.
I will target all label elements that I have
because for this website,
this is the look I want.
I don't have any labels
that should not get these global styles.
And hence using the type selector
is a good idea here.
Now here, I'll start by changing the text color
to color gray 100.
Which is a pretty white shade of gray.
I will also set display to block,
which is very important because that changes the
inline style, which labels normally have
to block, which for example,
forces a line break
and forces this element to take the entire line
and the document flow.
And I'll add a margin-bottom of space two,
which is 0.5 REM to have some distance between the
label and the input element below it.
And now speaking of that,
I also want to target all input elements on the page
and all text areas.
We don't have a text area yet,
but we will add one later in this section.
And for those elements,
I again want to start by inheriting my base font
because just as for the button, the browser,
or a lot of browsers
do to find default fonts for inputs and text areas.
And I don't want to use those defaults.
Instead, I want to use my main font,
which I set up in base-CSS and with font inherit,
I can force inheritance again.
Which otherwise would be overwritten by
those browser defaults.
Now, I also will add some padding
of space two in all directions.
And give my form elements, a border radius
of border radius, small
so that we have slightly rounded corners.
I will remove the border though.
So we still will see a border
because again, the background color
of those inputs will be different
from the background of the form,
but I don't have any explicit border
and I'll give them a width of 90%
so that they don't take the entire width
that they could get,
but that they also take more
than they would have allocated by default.
Because by default, those input elements
are quite short and by setting an explicit width
they will become bigger.
But I don't want to give them 100% simply just because I
prefer a look of 90% here.
With that, if we save all files again,
this is the look we get,
and that looks quite decent, I would say.
That's a nice signup form and we'll ignore the
navigation for now. It's of course not finished,
but instead, now that this form is finished.
I want to continue by implementing all the backend logic
for making authentication work
and for storing users in the database.