Welcome back.
So in this video we're going to talk about internal styling.
So the first thing I want to do is open up sublime if you haven't already and set up to learn basic
CSF 3 folder here I'm in right click on that to new folder I'm going to do 0 1 and we're going to do
internal styling.
OK I'm going to right click on that new file control asked to save.
I'm going to save this as index that HMO and then I'm going to type an H Tim Allen hit tab.
And the reason why we're doing this is this is an internal style sheet.
So what we're gonna do is we're going to actually style this page but it has to be an aged him out page
so I'm going to return twice after title and one more time and then I'm going to go up one tab in and
save and I'm on the left bracket.
S t y l e.
Right bracket.
And then we're going to do a closing bracket.
And now I will show you.
Let's right click on open in the browser real quick button sparked this and we're kind of going to style
this in here first and then we'll go back to the text editor.
So what I want to do select body click on the plus sign right here at and add new role and we're gonna
give it a background color of green
so you can see what it did there and I just delete it.
But what it did was it added inline code so you can add the styling up here are actually in line and
in line with me like body and then you do a style here.
I don't ever recommend doing that.
The reason why is there's way too much CSI is out there now.
And normally I'd say that's fine.
You can do that but at this point there's so much to do with styling that it's better to either put
it here as a last resort or have an external style sheet.
So let's do body I'm going to do a left bracket and a right bracket together return and we're going
to background green.
OK.
And then we're going to right click on open in the browser.
Now I understand we did that already in the web browser but that wasn't an official style.
And I want to show you how it shows up in the code here.
So the style body background Green
You got it right there.
Now if I did a vine slide the title and did this and we did color red
it's going to show that we did it in Lion style.
However it's not working because
we gave it a color of red and I need to actually do something with us.
Let's do title.
This is the title Yeah it doesn't work because it's not going to work.
You can't give the title a color red.
It won't let me do that.
So obviously the style and delete that and in the body we could add to this we could do font family
aerial pilots to rubato
and then I'm gonna add
an age one
and let's see if it actually changes the font which it should go.
Now if I if I went to the body tag and I turned off the vine family it's gonna go back to the default
text so I called that up.
The font family rubato color red
OK.
And then I'll actually.
So what this does is if I.
This is text what this actually does appear is anything inside the body.
So from here to here each one's divs paragraphs.
Any tag that you put in there will pick up these properties.
So background colors are going to be green font family will be robot doll and the color will be red.
So if I open this in a browser you can see this is text it's green
the background is green and the color is red and the font family's Roberto.
So that's internal style sheets.
Her style and I should say is you're going to build that right here.
And the reason why you would do that is if you want to test something commonly when I would do projects
in my previous employment some of the styling I did when I would leave it in the header but it would
only be a couple things that were just unique to that page and instead of making a new style sheet you
know for three properties or four you know four elements I just put one in here and it makes sense for
that.
Like if you're doing one or two this makes sense but if you're doing an entire page I don't recommend
doing this because it's going to slow down your page.
OK.
So in the next video we'll talk about external styling.
I'll see you there.