Now let's go for the font size.
The first thing I want to do is type the Hello world message and make a reference a placeholder for
this Hello world message so I can go to the CSS and make the changes as I want to.
So back to the index, my Hello world.
Hello world will be here.
But if I leave.
Hello world.
Just like that and save the config, it will be right here.
But there is no reference of.
A place, a placeholder so that the CSS file can go there and make a change.
So if I want to make the reference, I need to use a header for example, ah1 value.
So if I do h one and press tab to autocomplete and move this hello world inside of my h one, which
is my heading reference.
Now whenever I change inside of the CSS file linking to the h one will be applied to the Hello world.
So right now if you go to the web page, not much changed, just the H one, which is the basic standard.
Okay, Now I'm going back to the style page and before the body I'm going to type page one space and
the curly braces inside of this one.
Let's make a few changes here.
First, let's go for the font size.
The font size I can pick between large, large or median and so on percentage, inch or pixels or any
measurements that you can find you over here?
Yeah.
In my case, I believe my example was using the 30.
So right now if you go, we save and go back to the web page.
We should see a larger font size save back to the page and it looks like it's larger.
Let me see if I save.
Yeah, it looks larger.
Let's make a.
80.
Save and didn't work.
I forgot to put the pics.
80 pixels.
Save.
And there we go.
Much better.
But I don't want an 80.
I want to.
Just 30.
30 pixels OC 30 pixels.
Beautiful.
That's working right now.
The second change I want to make is the color.
Let's make this color as blue.
I believe it was blue in my example.
Save the config check.
Yeah, it's blue.
The next one is going to be the font size so it can.
Sorry, the font family.
I can change the family to anyone in this list.
In my case, I believe I chose Lucida sums.
There we go.
Save.
Yep, it did change.
The next one is going to be the alignment.
I can make a change into the alignment over here.
Text alignment.
That's the one.
Text alignment.
And the center will be fine.
Save the config.
And there we go.
It's there.
The next one will be the space between the letters.
So I'm going to type letter spacing.
Everything is so straightforward.
If you have an idea, just start typing.
It should be a configuration or a function or a code for that.
Just start typing.
If you don't know, just use Google or chat typed to help you out and give you the right code.
For this one, let's go for ten pixels.
Yeah, ten picks.
Save the config.
And yeah, that looks good.
I think I'm going to make my font a little bit bigger.
14.
There we go.
And the next one.
And actually the last one will be the text.
Shadow.
Taxi.
Shadow.
I need two pieces of information for the text shadow to work here.
How?
Text shadow is like a mirror, not a mirror duplicate.
You just duplicate the word and then you slide to the left or to the right, and then you slide down
or up to make the shadow.
Yeah, it's just that.
So I'm going to.
I'm going to give two pixels by two pixels.
Save.
And yeah, I kind of have if I change the last one in here for ten pixels, you should be able to see
it.
Did scroll down the letters from the back.
Yeah.
So this one will move the letters forward and this one will move the letters down.
If I want to move the letter a little bit forward, let's say eight.
There we go.
I move forward and down.
I believe in our case, three pixels.
And that three pixels will be ideal.
There we go.
We have it.
So this is how we can change the the look of our application inside of the CSS file.
So right now, just as a quick recap, this project have reference to the main dot JS page.
It does have a reference to the style dot CSS page.
The main page.
I have nothing over here right now but the style CSS.
I do have some references.
Yeah.
And then you can keep adding if you have another one as ahah1, it will accept every single piece of
configuration from every single code from the style.
CSS.
If you change to a H to let's say change to ah2 over here, it will accept another set of parameters
or coding or customization that you can apply.
Uh, into this?
Yes.
I'm just going to remove my one and leave as this.
So this is the end of the project.
Number three.