Hello everyone and welcome to today's webcast on html and css.
I'm Denkine, this is Jarund.
And we're of course managers here at Udacity.
And you know we're going to be talking about some css things.
The way css works is you have a selector.
For example dot targets classes.
And then the styling and
then you have styling that goes into the curly brackets.
Right, so for example, I have this really simple HTML.
And, as you can see, it's just a bunch of boxes.
Right?
And then I've linked here to my style sheet which is called style.css.
And then, for example, if I wanted to target, all the class box ones.
I can do this via this notation, so .box, select all the class box.
And then inside I have property call in value and so backyard color grey and
then 10 pixels margin to the bottle and mean high to 50 pixels.
And then as you can see all of my dibs are defined as as having class box and
then each one also has an additional class box one, bow two, box three right.
And so over here, when you go, like, into the separate box one, box two,
box three, I actually overwrite the background color property.
So, I gave each one a different background color.
And then, if we open this in the browser, right,
so this is how it looks like.
Right they all have different colors they all have like the same in height of
50 pixels and then ten pixels in between them.
The box model is something that you have probably seen but just a quick recap so
all elements our box says if we go into the developer tools.
Can select for example this.
And, you can see.
Where did there we go.
And you can see that this is really how it looks like, right?
So, there's, it's this box.
It can change the padding here to, I don't know, 40 pixels?
And see how weird, this actually moved it to text 40 pixels to right.
>> And the padding is inside.
>> Right.
So usually this is a counter whatever you have inside
the box could be text, images, another box whatever.
And then the padding.
Is comes right after that and the border is actually after the padding.
Right so the border encompasses their content and.their padding.
And then after the border, there's the margin.
So if we, for example so this is set to 10 why not set it to 40 as well.
You see it, everybody else just moved down to a company that's like
three pixels of padding.
So, yeah so the box model pretty cool.
Box elements, versus block elements versus inline elements.
And so divs H1s, most of what you could think of, those are all block elements.
There are couple of inline elements I think mostly,
tags such as bold like making your text bold and things like that.
>> Expanders.
>> Yeah. >> Block elements right as they're stuck
vertically and inline elements are kind of in the same line.
>> Right yeah, like block elements are sort of like they take all the space
they can take in line, horizontally but still spaces they can take vertically.
So for example in the css code that I show you all the boxes had a min height.
50 pixels.
And if we take that min height away, so
you see in here min height 50 pixels say for this box.
If I take that away, whoops, all the boxes disappeared,
the only one that remained is this one because it has content in it.
When we give the min high back they go back by because these are block
elements.
Their default properties is as be as wide as you can and
but as short as you can, right.
So they're going to either accommodate content if they have content or
if you have specified mean height for them they're going to accommodate that.
If they're if you don't have content and
don't have mean height they're just not going to show.
Let's change that to yem.
>> So it's big huge that's pretty massive.
So maybe you might want something much smaller like 3m or something.
>> Let's do that.
>> So yeah six so.
You could play with that means if you change the font the default font than
this size will change accordingly and yeah.
You know you can but the percentages, all the others we talked about, dh etc.
There's two kinds of centering, you either want to center your div or
you want to center the things in the divs right.
>> So to center your div you can use the margin left right and
margin right properties.
And then, so if you set them to auto,
that's going to center the div.
And then- >> You could see what happen.
We set left to auto and it's like it had it's arm and it pushed it all the way
over to the left, that was Ben Jackie's visual for that.
And then when you set right it's like you take the right
arm you push yourself.
It pushed itself all the way across from the right side.
>> Right, so you're telling it be as much as you can to the left but
also be as much as you can to the right.
That sort of like two conflicting instructions so what does it do?
Stands right there in the middle.
So that's that's a way to center your element.
To center the text or whatever.
If you have text inside the element then you can just use a text align property.
And then we can use a different thing,
you can you center if you wanted the text to be centered.
Again so now that it's a centering we can also use it to do other
things such as say nice and justified.
Another thing that you can use instead of using margin left and right so
let's get rid of these, is you can use margin auto.
So this is actually margin zero and auto.
So, this looks like it does the same thing.
Because what this does is it sets the top and
bottom margins to zero and then the left and right margins to auto.
And the top and bottom margins are very different.
This is a very different from the left and right just because those elements,
because box elements behave differently when it comes,
they behave differently vertically versus horizontally.
So you can actually center in the middle of the screen using something like
margin top or auto or margin bottom although that just won't work.
Yes.
>> It's fine to do something like this you say top and bottom a zero, left and
right are auto is the short hand, the short cut.
>> Yeah.
If you float an element they take your element and sort of cause it
to make it look like as if it's like in a, on a layer of its own.
>> Mm-hm.
>> It's not really in a layer of its own, but
it looks like as if it's on a layer of its own.
And we should actually demonstrate that.
So let's actually float this box.
And then I think.
It's floated to the left.
>> Yeah, what just happened here.
>> Exactly.
So now it looks really weird because all the other boxes just
jumped as if like they couldn't see this box at all.
They just like jumped one up.
This is because we are now saying hey,
this box1, it becomes invisible to the other boxes, really.
And it no longer takes maximal space available to it,
so the other boxes just jump.
Let's float another one.
I want to now float this box and then I'm going to, Load it left as well.
Okay, now it disappeared completely, but it didn't disappear,
it's actually hiding.
Let's give it a different width,
so now we've floated both.
Both the box one and box two.
>> So, what happened why did they go to where they are.
Well essentially they went when they're both floated they're both like on
a separate layer by themselves kind of like you can think of that as like
a layer, layer two.
And they're aware of each other's existence, but they're not aware of the,
but other boxes are not aware of them, so other boxes do not see them.
And it is as if those boxes are taking zero space.
So, essentially, when you unfloat them,
You see how this goes back to being on a normal layer.
And then but when you float it, it goes back up.
And the other thing is that they’re also not only they're aware of each other but
they're also, like, this is all that weird because if they're one fluid.
So let's unfloat them and let also unfloat this.
They are actually underneath one another,
they're not horizontally next to each other.
>> Because they're block elements.
>> Right, yeah but then when you float them that's no longer the case right.
When you float them they sort of like lose that property of like wanting to
take as much space as they can horizontally.
Sort of like they are no longer horizontally territorial.
>> Yeah, because we're telling it to float left.
Now it's interesting that we take box2 and we float it right.
Let's see what happens there.
If we take box2, then we can defloat right.
What do we think will happen?
Right, it jumps to the right side.
So you can put things on both sides,
they're both in this float layer and they're hiding.
Now here's an interesting thing,
what happens if we float box one to the right also?
Let's see.
Yeah, look. That's interesting,
notice how box one is to the right of the green box, box two.
And the reason for that is box one came before box two.
So it's kind of like there's a race.
And the first one you say okay float right and you get to box one the box one
goes to the right and then you got to box two and you say float right but
box one is already there so it goes as much to the right it's possible.
>> This is sort of like the first element and so when you float it to
the right it's the first one it's going to be on the right side.
And when you float it to the left it's going to
be the first one it's going to be on the left side.
And then when you float elements that come built that.
This is the second element and so it's going to follow the first element.
Now what if what if we have the common situation where we like these things
floated but what we want everything else to come after it like you know like.
We need to clear like it's there's actually something called clear fix.
You need to fix this.
We need to clear all the problems.
To fix these these floating inches.
So, let's select the third box right.
And then let's give a property.
Let's clear- >> Clear both.
I think that's left and right.
>> Let's clear both.
>> Yeah, boom, look at that!
>> So now you're essentially telling it you actually you got to be aware,
you've got to be aware because there's actually elements floated on both
sides which clear opens on both sides.
We actually we floated those to the left so we don't have to,
this is going to be the same thing now.
>> [CROSSTALK] Right, yeah.
>> The clear right works for
this because those two elements are like floated to the right side.
So you're telling that third box watch out,
you have elements floated to your right so you want to be below them.
>> Yeah.
So if you ever hear someone talking about clear fix,
This is kind of a trick that you need, you can Google it.
There's actually two things you need for clear fix you need to clear left or
right, and you also need to set the overflow for
a weird case where you have nested divs.
So when you look at the clear fix, you'll see it clears and
it also sets an overflow, so if you don't forget, just google it and add it.
And even within Bootstrap you sometimes have to be aware of these issues, too.
So you'll see references to clear fix in Bootstrap shot.