All right.
Welcome back.
So in this video we and talk about external styling.
So let's head over to Sublime.
I'm going to close out index that age to now.
We're gonna right click on learn basics.
Yes history.
Do a new folder zero to that external styling.
So what we're gonna do in this page is similar to the previous video.
We're gonna do a new file and we're gonna give us an index of index that age Timo but there's a twist
we're going to right click again into a new file and we'll control us and do style and IDC RSS.
OK so what I want to do first is go to index that each symbol we're going to have an HMO hit tab and
then inside of here we're gonna do a link tag so we'll do the link to just type and link it enter.
That's going to auto fill everything you need then we're going to do style that CSX so commonly what
happens is you'll have let's say that this right here was where I see as as follows normally you'd have
the you'd have CSF slash style that has us.
And the reason why that is to separate the content.
But in this video we're just putting in an external styling so style that CSX is in the same folder
as index at each demo.
I just want to show you that because that's an important thing to understand because sometimes an entire
project can get messed up if you're not pointing it in the right location.
So making sure that files are not broken is very important especially when you start adding 10 15 20
style sheets right now it's OK because we're just doing the minimum.
But as you get into it more you'll understand.
So let's go to the style that CSX page and we're going to use similar properties that we did before.
So we're going to do body bracket right bracket return we'll do background instead of green we're gonna
do blue
and then I'm gonna do color white and we're going to do font family rubato.
OK.
Now I'm going to right click and open in the browser and you can see we are blue.
I don't have text.
I'm not gonna give me anything for that.
If I inspect unlike last time it doesn't have styling here it has it right here.
A draft style that CSR is now if I double click that.
See that was a way to look at that and see where that was.
Let's go to Style editor.
There you go.
If you go to the Style editor you can actually add to this.
So you could do a one
and we could do color red
font size.
Ms.
And what that does is you can save this.
I can close this out and now it adds it to my style sheet so I didn't even edit it in here.
I did everything in the web browser.
Let me show you that again it's a pretty cool thing when you inspect go to Style editor and what you
can do is we can edit right here so I could change his color to read save it.
It's going to pop it up right there and the whole idea of this is you can test and debug and kind of
play around with what you've got and see what looks the best for what you're trying to do.
That's the whole idea behind it.
So if we don't want red let's say we want black OK.
Then you save it No I was going to delete this because we don't have an age so we save that and you
can turn the style sheet off or turn it on.
You can also add a style sheet so you could do let's just save that and then it will have you save it
to your computer and then you can turn that on and off
so turn it off.
Let's refresh this just so that disappears.
But this is a great tool if you'd like to work in the web browser instead of sublime.
For whatever reason just so you can visually see it.
I'm visual so I like to see what I'm doing.
It's a great tool.
The other thing you do with Inspector and you can also drag it down.
That's another nice thing about Firefox is it gives the ability to customize this anywhere you want.
So if if I go into body and I add I'll edit as each Timo and I add an H1
and we'll call this text then what it should do is give me a white text.
Right.
Then I go to the Style editor and let's say that I want to make this center.
So we do text align center OK.
Not center.
And let's give it font weight
bottled
was 2 800
I I didn't work.
But you get the idea.
So this is a really cool way to not only edit CSX but also kind of debug what the problem is you know
because you can go in here and you can turn this off just by going in there and highlighting that and
hit delete and then if you hit control Z you can that.
So you can really narrow it down to whatever the issue is.
And the fact that you can turn on and off style and then you can really see the effect that it has on
you add that styling.
OK.
So I'll see in the next video.
Thanks for watching.