So let's work on some styling.
And before we write any form specific styles,
I want to set up some base styles and style settings.
For example,
I also want to add some base fonts
that I'll use throughout this project.
Now, the most convenient way of adding fonts
is to use Google Fonts.
And you can, of course,
pick any fonts you want here
to customize your project for you.
I will go with this Montserrat font here.
Because I like that.
So I'll choose this
and here I'll pick the regular version
and click on select this style
and then choose the bold version,
the 700 version.
And then here we get the HTML elements we need to add
to our project.
So I'll copy that.
And then back here in the project,
I will go to head.ejs because that is this base head section
that we use on all the pages.
And there below the title,
I'll insert these elements, like this.
So that these links are
inserted here in the head section.
The links I just grabbed from Google Fonts.
And the link element you learned is an element
that allows us to link to other style sheets.
In this case, style sheets defined by Google,
which in turn define these fonts.
If you want to learn how to define your own fonts,
we do dive deeper into this a little bit more advanced
technique in our CSS cores.
Here we're just going to stick to Google Fonts instead
because that is quite common to do in web development.
So now we've got this set up, we've got these fonts.
Now I also want to add my own CSS file
with some base CSS setup.
And for this and the project folder,
I'll add a new public folder because I want to group all the
CSS and JavaScript files that will ultimately be exposed
to our visitors.
They have to.
I want to group them together into such a public folder,
which is then served statically so that any requests
to such CSS or JavaScript files
are just handled automatically.
In this public folder I'll add a styles folder.
And in this styles folder I'll add a base.css file
and as you might imagine,
here I want to set up some base CSS rules.
Now before we write any CSS code,
I want to ensure that this file is served statically
so that it can be requested by any HTML pages.
And for this in app.js,
after setting up the view engine here,
we can use this express app object again
to use some middleware
and here we want to use some middleware
that's actually built into express,
but that still has to be activated explicitly.
And that is this static middleware,
which we can access on the express object itself.
And here we can just pass the name of a folder
which we want to serve statically.
So now all the content in the public folder can be requested
by visitors.
And of course,
they're not going to request our CSS files themselves,
but their browsers will request them for them because we'll
include links to our CSS code in our HTML files in the end.
Because that's the next step I'll do.
In views, includes head
and after defining all these links to the Google Fonts,
I'll add my own link by typing link and hitting tab.
And here I want to point at styles base.css.
Very important, here we don't have /public/styles/base.css
but just /styles/base.css.
Because the public folder is not part of the path
instead, this here is the path
to which a request will be sent
and thanks to our static middleware,
express will look into the public folder
and see if it finds a path
in there that satisfies this request path.
Which here of course is the case,
since we'll have a styles folder with a base CSS file
in there.
So that's why in the head.ejs file
we just have /styles/bass.css here.
With that this file will be included,
but I can already say it won't be the only file
we need here.
Instead in this styles file,
I will also add a forms.css file
with some general form specific styles
that will apply to all the forms in this entire website
and I'll add an auth.css file with specific CSS code
for the sign up and log in views.
Now, theoretically,
we could work with only one big CSS file.
This would be fine from a security perspective, for example.
But it would have two disadvantages.
One big disadvantage is that it would be a large file with
lots of CSS code in there
and as a developer,
it can become cumbersome to work in such a code packed file.
In addition,
another disadvantage is that if we write all the CSS code
in one file, all pages have to get all the CSS code
even if they only need parts of that CSS code.
That means that all that CSS code needs to be requested
and downloaded for every page you visit
and this can be a performance problem
and a waste of bandwidth.
And therefore, you want to split your CSS code
into granular files
so that you can fetch as little CSS code as needed
and not everything all the time.
That's why I'm splitting it into multiple files.
Therefore, of course,
I also want to link to form.css and auth.css
but I don't want to do this in head.ejs
because I just explained
that I don't want to get all the CSS code on all my pages
but I do plan to use head.ejs on all my pages.
So if it would add the links to forms and auth.css in here,
I would still get those CSS files on all pages.
That is why I didn't close the head tag here in head.ejs.
Because I actually want to be able to add more head content
in other ejs.files.
In this case, in signup.ejs.
I do close the head tag here
and therefore I can add my own links
that are specific to the signup page
here between the include of head.ejs
and the closing head tag.
And it's therefore,
here where I will add a link to /styles/forms.css
and then thereafter, to /auth.css.
The order is not too important here
but it does matter if I overwrite some forms
or base styles in auth.css
that would only work if auth.css comes last.
If I have a clash with forms.css and auth.css comes first,
form.css would win instead.
And therefore,
I will actually import the most specific CSS file
which is specifically for this auth page last.
So that I have the opportunity
of overwriting any other styles in there.
Okay, So that was a lot of talking
but now this is set up.
And now we can start writing our CSS code
and as mentioned before,
I will start with some base styles in the base.css file.
Now in this base.css file,
I will start with a special selector
which we haven't actually seen
or used too often in this course
and that's the *selector.
This is a very simple selector,
it selects all elements on the entire page.
And I'm doing this because for all the elements,
I want to set box-sizing to border-box.
This controls in the end,
what the width of an element will be in the end,
if the border and so on counts into the width or not.
And with border box,
I got a behavior that makes working with widths a bit easier
because the width of an element then includes everything
and if I set the width of an element,
I don't have to check if it also has a border,
which would make it a bit wider, which I might not want.
So this is a little convenience to ensure that the
width of all the elements is exactly what I set it to,
no matter if they have a border or not.
But after that,
I'll add the HTML type selector to target the HTML element
because on this element, I want to set the font family.
I could also do this on the body,
it doesn't matter too much.
But with HTML, thanks to CSS inheritance,
which you learned about in this course,
all elements will get this font family.
Because they all are inside of HTML, of the HTML element.
They are all descendants of the HTML element and therefore,
they will all inherit from the HTML element.
And so the font families set up here will be inherited
and therefore, used by all the other HTML elements,
which is what I want.
And here I'll set this to Montserrat,
which is that font we added from Google Fonts
and then thereafter, sans-serif
to use another font as a fallback.
So that now sets this font family.
And if we save all files now with all these links added
and so on, if we go back and reload this page,
we should already see that the font changes.
If it doesn't change double check
that you're importing it correctly,
that you don't have any typos in your file names and so on.
But now we got the font in place.
Of course the font is not everything though.
We also want to work with colors.
We'll need plenty of colors for different elements
on this page.
And I don't want
to have to redefine colors in all my CSS files.
Because we'll have plenty of CSS files
by the end of this project.
Therefore, in the next lecture,
we'll see what else we can do to manage colors
and other settings in one global place.