All right.
Welcome back.
Let's get started with Cece's positioning.
But before we continue, we need to understand the differences between in-line and block level element.
Because understanding this concept will help you to understand how elements behave sometimes.
So let's get going.
Well, the first point is that block level elements are elements that starts on a new line and it takes
up the full width available to them.
And the next point is that they behave like a stack of boxes, something like this.
Let's say we have one block level element and they are on top of each other as that.
So I classify this one as stack of boxes.
That is how block level elements behave.
The next point is that block level elements can sometimes contain inline element and other block level
element.
So we normally use inline element inside block level element to style, a specific text.
So let's see how we are going to implement this with code.
So as always, I have created a fresh application with only a HTML file in it.
All right.
So what are inline elements?
Example of inline elements is the span strong emphasize, break button links, label and underline.
If you Google around, you will see the types of inline elements.
But let's look at the behavior of inline elements.
Let's start with the span element.
Before I continue, let's add some underline here to differentiate what we are going to talk about.
Now, let me add the element called span.
And inside this span, let me add some more text and call this one as Span one.
And I will say this one is inline elements as that when I save it, you can see how it is behaving for
this one.
You may not know the behavior of this one until I add a new element called Span.
Again, for this one, I will change this one to span two so you could see the behavior of inline elements.
This does not start on a new line.
It hits the available space as much as it can.
So if I style this one that way, you better understand the movement of this pattern element.
So let's add some style attribute here and in there.
We can add some CSS in here.
So I want to style all this pattern and give it a background color called red.
Now let's see.
You can see how it's behaving.
Let me change the color to white.
As that.
So the take note here is that in line element that is not hey, new line, but instead they move side
by side and take the available space as much as it can.
So let's say that you want this element to be on top of each other.
Then what you can do is we need to use what is called block level element, and then you wrap them inside
the way it should be on top of each other.
If I add another tag, which is inline element, for example, button, let's see this.
I'm going to be the register when I save it.
You can see that they are all moving in one direction and this is the behavior of inline element.
The next type of inline element is what we call the emphasize.
So as that now called, this one has could.
When I say it, you can see that how it is behaving so that the behaviour of inline elements.
So what about block level elements?
Let's have a look as that.
And now down here is going to be block level element and block level elements.
Let's write and see the behavior of block level element and example of block level element or footer
for H one to access header, main navigation paragraph and the underlying code.
So let's see them in action.
Let's say I have let me add each one because each one is also a block level element.
Our code is one block elements like when I save it, have a look.
We have each one.
If I add h two because it's a block level element is going to be on top of each other.
And I'll call this one as block element two.
Save it.
And if you see the behavior of block level elements, remember paragraph two is a block level element.
So let's add up and see.
Our code is one as a paragraph.
Now let's see when I save it.
You can see that it is moving on top of each other.
And as we said, block level element, it takes the available width.
So if I add a color to the block level element, you can see how it's panning across the width.
So let's see, let me add a class to the paragraph or the H one.
So each one here, let me use the H tool.
So for H to our mix of background color and this are going to be yellow, you can see how it is taking
the available width and that is the behavior of block level element.
And for block level elements we can add width and height to an element.
So for edge two, let's say I want to have a width of say 20 pixels.
Now let's see, you can see how I'm controlling the width of the particular element, let's say 90 pages.
And if you see the behavior when I increased to say 200 and now you can see the behavior, let me increase
more to five or 600.
And now this is the behavior of that.
And I can add height or weights also maybe 40 pixels and you can see how it is moving.
Let me increase by C 90 or weight.
And if you see that, I mean able to control the height of that element.
So what about this pattern element for this one element, I want to add, let's say weight of let's
see, ten pixels, let's see.
You can see that nothing changes even if I add height to it better.
So there would be no change on that.
That is the behavior of inline and then block level element.
As we also discussed, that block level element can take inline elements.
Let's say I have a Dave and remember Dave is also block level elements and inside I have P, which is
also block level elements and I add some dummy text inside.
Now this is my dummy text and let's say that I want to give this text a particular color and I can use
in line to style a specific text and that is how we normally use inline elements.
So now let me copy this one or let me cut it and then let me put it inside span element as that.
Now for this element, as soon as I added it, we see that it has taken the CSS property of red because
we have specified here as what red as that does the behavior of inline elements.
And let's say I want to underline this one, I'll cut it and then use you underline and put it inside.
And now we see that I have underlined a specific text.
So this is the behavior or if this are the behavior of inline and block level elements, understanding
this property is going to help you to know how sometimes some elements behave.
Maybe you may be asking that.
How will you know that a particular element is a block level element or inline elements?
And let me show you the clue.
You can find them on the Internet, Google it.
I'm going to have a lot of resources.
Give me you all the inline elements, but let me show you my technique.
If I want to know the behavior of an element or what I would do is I'm going to add a background color
to that element.
If I see that the colors span from left to right, which takes available space, then it is called block
level element.
This is my secret for you.
All right.
The next video, let's get started with how we will talk about positioning in CSS.