OK.
So at the end of this project all we have left is to style it.
And it's kind of funny I think for a lot of people this is the most exciting part even though it has
the least to do with the Course but I guess it's nice to have something visual to make it look nice
if you know this as skip this.
You can just copy the style sheet in.
Take a look at what I did.
This is not going to be like I've said a couple times not of course on X it's on a course on CSSA.
So what I'm going to do is rather than spending two hours of video going over you know styling this
one piece at a time and talking about my workflow and why I'm doing certain things what I've done is
just copied over the finished style sheet and our finished markup.
But we still have our empty marker or a basic markup and we don't have a style sheet.
So what I'm going to do is just walk through and kind of copy bit by bit over and explain what chunks
do.
But not everything.
And these two files you can also you can find yourself in the slides are too large but I've included
them along with this video so that you can copy from there unless you're someone who likes to type things
manually which some students do.
OK.
So again these are two files that are not connected to our app.
These are the solution files.
I'm going to refer back to but for now we're stuck with this our basic h team out.
And we don't even have a way of styling it.
And for those of you who don't know CSSA or know what it is it's how we add style color font images
Well we add images generally but we can add a background image to something using C Ss and the way we
usually write that is by creating an external style sheet a C S S file and writing styles in there like
this.
So we need a way to actually connect them and not going to go into too much detail.
But usually what we do looks like this we would have a link raúl Eco's style sheet.
This is NHT him I'll tag that includes an external stylesheet.
So if I do that and I just paste in here there's two problems.
One we don't even have an act out CSSA created but to express isn't going to know about it.
Hi Paul Well we can do is start off by creating a new directory.
And this is just a conventional name.
I'm going to call it public.
That's kind of standard for a web app but you can call it whatever you want.
And inside if they're going to create a file called app C Ss like that and then we'll put our code in
here.
And let's start with something really simple like turn the whole body.
It gets color purple so all our text is purple like that color purple blue.
Hey my cat just attacked me.
Hey why don't you let me record OK.
Hang on I'll be back here to handle this.
All right.
That's been handled crazy cat.
So back where we were.
We've got our laptops the SS body color purple.
This is not connected to our app.
If it were then our techs would be purple but it's not.
So how do we get it connected.
Well there's a problem.
Long story short we need to add this line.
So this is another app you use and this tells the Express I go into our main file here app Jass is at
it with the other apps that use keep all our configuration and it's basically saying take whatever is
in the public directory which is right here take all the contents and serve them so they're accessible
by our views or from our Javascript.
So now if I can restart the server app just the SS is going to be available to this file.
Hopefully And if we are fresh the page we now have purple text.
OK.
So we now have a stylesheet connected and if you had just a quick aside if you had multiple different
views here and you wanted them to have the same style sheet you could use this line and all of them
where there's actually a better way which I'm not going to talk about in this course called Parshall's
where you can basically have code that runs on all of your views but you can also have a separate style
sheet for different views if you want to just put them all in public.
OK.
So that's the first simplest thing.
The next thing you'll notice in the finished markup is there's also a Google API.
Google font included.
So I'm going to put that in here too.
This is for a font called rubato pretty common one if you're not familiar with Google fonts.
Really great resource free fonts that you can use on your own web sites.
And they look good.
So now let's also go back to our See assess and learn to copy some of this body stuff over for example
font family.
Let's start with that.
So we don't want things to be purple we can get rid of that but let's change the font so that we now
are using that rubato font.
There you go.
Our font has changed slowly getting there.
Next thing that will do if you go back to the SS is we'll take the color and the tech shadow and the
text the line.
So I don't need font family again I'll get rid of that blindness of OK so this color is like a slightly
purple gray if I remember and we've got this slight shadow which I don't know if you could pick up on
on the original.
We're getting close.
Well no that's a lie but we're getting close to being done with body.
Then we've got a couple of other things.
First off is the background image.
And if I just show you this image in its entirety it's a massive image of peaceful mountain in Argentina
down in Patagonia.
They took on a backpacking trip.
It is called Sarah Turei.
And yeah that's my little plug for my photography.
Maybe we'll have a photography course one day.
So here's this photo that we'll use we just need that you are and we're setting the bodies background
image to that photo save and refresh and it works.
But you can see kind of just looks like a solid color but it's using the image just so big that it's
taking fee.
You know I don't know five or six of these screens or more so that's actually something that if this
is a real app it would be good to just use a smaller image so we're not loading such a big image but
what we can do is use background size and set that to be covered.
And now it will basically take the image and make sure it covers the entire background.
So we've got that getting a little closer now.
The next thing that we can do if we scroll down we'll come back to this flex container we've got our
H-1 and our paragraphs.
And if you noticed I'm setting the font weight to be 100.
I'm actually going to get rid of that in both of them.
There's a better thing that I can do which is just sent the fat set the font weight to 100 in the body.
And what that will do is just make our font thinner so that we get thinner text.
OK.
So we've done that and let's see moving on.
Let's work on the H-1 next.
So the H-1 is giant or what's not giant yet put this Join us that will be giant in a bit.
It's got a couple of things that we're doing.
We've got we're setting well let's just copy it all over the margin to be zero font size.
Five hundred pixels
line height is 400 pixels OK.
So it looks massive right now.
And that's because I'm super zoomed in.
So it's not massive now.
It's still big.
But nowhere near as bad.
So we've got.
Join us.
And that's big it looking relatively good.
But we want to do of course is position it downwards.
But I'm going to wait to talk about that.
So we'll move on to the next thing.
We've got our paragraph that we can style and really all we're doing for the paragraph is changing the
font size.
So this here gets bigger.
Then after that we're onto the form and the button.