All right.
Welcome back.
So in this video we're going to talk about basic CSI has three properties.
So let's go to Sublime Text 3 and I'm going to close these out here.
I'm going to right click on learn basic CSI 3 and then do new folder and we'll do 0 3 basic CSI has
three properties.
Kate we're going to right click.
We're going to do a new file save as index that age Timo and then I want to make a CSI file.
So we're going to call this style CSI us.
So what we're gonna do is an the index that each small page will do.
Age 2 now we're gonna tab and then we'll do learn tech plus just the plus one and then we'll do basic
CSI has three properties.
And then what we're gonna do is we're going to link this so return a few times and we're going to link
and we'll do style that CSI us.
Now what I want to do is we're gonna make a div but first I want to comment this out.
So we're going to do position
property.
And we're going to div and we'll leave the div there.
Okay.
Now let's go to the style sheet.
So we're gonna do div left bracket right bracket and what we're gonna do is the first thing I'm unsure
is position.
So we're gonna type in position where the absolute and we're gonna do top 10 pixels left five hundred
pixels and we're gonna do a with 500 pixels Height five hundred pixels and then let's do a background
of black one right click open in the browser there you go.
So what we did there is we gave it a width and a height and then a color or background color so that
you can actually see the element.
So when you make a device or any element for that matter and CSX you need to give it the basic property
of a width and a height and a background color
so that's what we did.
And then with the position we did absolute top and left.
So we did.
We were 10 pixels from the top and five hundred pixels from the left so that's what we did there.
But now the next property I want to talk about.
We're going to talk about the border.
So let's do border property
now with this.
Let's give this an I.D. of border.
That way we can separate Div. from the border plots to div border.
And so what you're going to do is you can call the I.D. the hash tag border and then what we're going
to do is we're gonna do we have to give it a width and a height.
So we'll do with 500 pixels height there's going to be 500 pixels.
Background is gonna be white and then we're gonna do border one pixel solid below.
I want to right click and open in the browser from index of age to me.
I'm sorry.
You'll see there it is now you'll notice something.
If I inspect this real quick this div and this div there as they're accumulating the same properties.
So when I made this div and we gave it all these properties position absolute top 1 10 pixels left five
hundred pixels width and height five hundred pixels and then background black it grabbed all that and
pushed it to the center.
But you notice something.
This I only did with 500 pixels Height five hundred pixels background white and then border one pixel
solid blue which is what I want to show you but also what I wanted to show you was that it picked up
position absolute top 10 pixels and left five hundred pixels.
Now if I check these
you see there it is.
But what it's doing is it's not commenting these out because it has the same element name Dib.
So div div so you have to be real careful with that because what it does is I turn that off.
Then it picks up this one it's basically you turn it on and off a layer.
Now I don't want to give it that one I want to give it this one and vice versa.
Now the height and the width are the same.
So that's not going to be affected.
But the point of what I'm trying to say is you want to make sure that if you're giving an all this you
want to give it all the properties so give it a position and give it a top in the left so it separates
itself from this Dev.
So I want to do that right now.
So we're gonna go back to the style and we're gonna do.
Position
absolute top.
So we're going to do top and we'll do 50 pixels.
We're going to left 50 pixels will control us to save that go to the index for the instrumental file
right click open to the browser.
And now you can see this is our object right here.
So we're 50 pixels from the top or 50 pixels from the left.
And it's separated from this div here.
And if we inspect this you can see this div as the property of div or that's the element I should say
and the divs elements.
Property is position absolute 10 pixels left 500 with five hundred Height five hundred and then background
black.
Now this one is a div with an idea of border.
And since we put in every property across these out so we overwrite that with these properties because
we're using the same ones but it would we want to use different sizes in different directions.
So that's why we did that.
OK.
So now what we're going to do is we're going to talk about font size and text online.
So let's close out Firefox here for a second and we're going to go down here and we'll do let's do font
size
and let's do
text align all this to font size.
So we're gonna do H1 and this is some text we'll save that and then we're gonna hop over to our style
that CFS our style sheet and where do H1 and we'll do font size to MS and text align center.
OK.
Now I'm going to right click open the browser and I'm explain to you in a second what MS are.
OK.
So there is the text there.
So what I want to do.
Let's go back to sublime real quick and I want you to highlight from this point line 18 all the way
up here and then hit control and where the question mark is on the keyboard holding control.
Hit that and that will comment out those Debs so that we can right click here open in the browser and
then we can see this is some text and that we did text a line and you can see we gave it a font size
of two M's.
Now if we did three M's or four you see how much bigger it's getting.
So I'm going to go back to two and so what two MS is is it's MS is like a responsive version of font
size so you could do essentially what you're doing we're you're doing to MS as you're doing 32 pixels
so 1 m is 16 pixels.
Guys let me grab my calculator here so I can show you.
So if we had won em they'd be 16 pixels.
If we did for Ms B 64.
So let's do that and just see what that looks like for Ms.
Yo.
So that's 64 pixels.
Now if I typed in 64.
There you go.
So that's Ms.
And that's text line as well.
Font size and text line.
OK.
So that's how you would do that.
The next thing I want to talk about is font family font weight text decoration.
So let's go back and we're going to use this same example and we'll call this instead of font size font
style and that way we know.
OK.
So we're adding all this stuff.
So under text align let's do font family and we're gonna do rubato that I'm going to do font weight
that's 2 800.
OK.
And then we're going to do text declaration underline.
OK.
So let's right click open that in the browser and now you can see it's bolder.
So let's inspect just so I can show you what we did.
So the font sizes to Ms if we took that away would stay the same.
We text align center the font family as rubato and when I turn that off it goes back to the default
font then the font weight is eight hundred.
So it gets bolder.
Right.
And then the text declaration is underlined so you can see that when you add these different effects
it really adds to the text adding the font weight the text decoration the font family the font size
and the text align right.
Now what I want to do is I want to add margin and padding to the text so let's close the browser out
and what I'm going to do is I'm going to just add it right to this H1 so we're going to do margin marks
sorry margin and we're going to do 20 pixels and I just want you to take a look at this and see what
it does.
I'm not going to tell you I just want you to visually see it.
So let's open up the browser and let's see what that does.
Let's inspect it and right now you can see we are 20 pixels.
So if I add that.
OK.
So you see what it's doing.
It's evenly evenly moving at from the left and from the top.
And so what we did here is if you look right here when we typed in one hundred thirty two pixels it
means that all around the text there is one hundred thirty two pixels.
So from the top from the left from the right and from the bottom two hundred thirty two pixels.
OK.
So let me close that for a second.
And make sure I have it in there.
We had that.
And now what we're going to do is pattern is a pattern.
Let's do 50 pixels just so we can see what it's doing
someone open on the browser.
Right click inspect and I'm gonna go to the H H1 and we're gonna go to pattern now pattern.
If I turn that off you can see it's bumping it down quite a bit.
And if you look here basically we have 50 pixels in every direction.
So you have 50 pixels from the top of this is some tax from the bottom from the left and from the right.
And then you have the margin on top of that.
So this is the box model.
So you have the margin the border which we don't have any and then padding and then the content.
So what that does is it gives you the ability to move the content around so you can move it left to
right.
Right.
You know top to bottom wherever you want to move it.
It really gives you a lot of flexibility as to where you can move it.
When I turn the padding off then it moves it up when I turn it on it moves it down.
You can also do margin left margin right margin top that kind of thing.
So let's look at that real quick.
So if I turn these off let's just delete these two and I'm going to do margin margin.
Let's see the margin top is fine let's do 50 pixels and then let me do margin left
and we'll do 50 pixels.
OK.
And then I want to do pad in panning right pretty pixels padding bottom 50 pixels.
OK.
Now when I open this up I'm going to save that when I open this up in the browser and I inspect and
we go to the H one and I turn off padding bottom pattern right.
You can see where it's moving it and the pad and the margin margin top that's really the only one affected
when you have a tax the line that kind of Jacks everything up but when I turn that off then we get a
little more of the effect that we're looking for.
So the margin left when I turn that on it bumps it in and the margin top pumps it until now if I turn
both of those off if I turn all this off.
This is the default location.
Whenever you create a new element on a web page and it's the first element this is the default location
because it's the top left.
That's where they always put the content.
They've always started from the top left.
So when you start fiddling with this you're always working from the top left swinging and all that.
All right.
Thanks for watching.
In the next video going to show how to download the files for the project and then we're going to go
over the course or that of course but the project overview so we can start styling an actual project.
All right I'll see you there.
Thanks for watching.