1
00:00:05,520 --> 00:00:06,420
All right.

2
00:00:06,420 --> 00:00:07,770
Welcome back.

3
00:00:07,800 --> 00:00:11,250
Let's get started with Cece's positioning.

4
00:00:11,640 --> 00:00:21,960
But before we continue, we need to understand the differences between in-line and block level element.

5
00:00:22,140 --> 00:00:29,600
Because understanding this concept will help you to understand how elements behave sometimes.

6
00:00:29,610 --> 00:00:31,740
So let's get going.

7
00:00:31,770 --> 00:00:39,870
Well, the first point is that block level elements are elements that starts on a new line and it takes

8
00:00:39,870 --> 00:00:43,570
up the full width available to them.

9
00:00:43,620 --> 00:00:51,890
And the next point is that they behave like a stack of boxes, something like this.

10
00:00:51,900 --> 00:00:58,440
Let's say we have one block level element and they are on top of each other as that.

11
00:00:58,440 --> 00:01:03,050
So I classify this one as stack of boxes.

12
00:01:03,060 --> 00:01:06,660
That is how block level elements behave.

13
00:01:06,960 --> 00:01:16,530
The next point is that block level elements can sometimes contain inline element and other block level

14
00:01:16,530 --> 00:01:17,400
element.

15
00:01:17,400 --> 00:01:26,430
So we normally use inline element inside block level element to style, a specific text.

16
00:01:26,430 --> 00:01:30,660
So let's see how we are going to implement this with code.

17
00:01:30,990 --> 00:01:38,310
So as always, I have created a fresh application with only a HTML file in it.

18
00:01:38,730 --> 00:01:39,210
All right.

19
00:01:39,210 --> 00:01:42,210
So what are inline elements?

20
00:01:42,380 --> 00:01:54,210
Example of inline elements is the span strong emphasize, break button links, label and underline.

21
00:01:54,240 --> 00:01:59,130
If you Google around, you will see the types of inline elements.

22
00:01:59,130 --> 00:02:02,970
But let's look at the behavior of inline elements.

23
00:02:03,000 --> 00:02:06,080
Let's start with the span element.

24
00:02:06,090 --> 00:02:12,450
Before I continue, let's add some underline here to differentiate what we are going to talk about.

25
00:02:12,480 --> 00:02:16,410
Now, let me add the element called span.

26
00:02:16,410 --> 00:02:22,020
And inside this span, let me add some more text and call this one as Span one.

27
00:02:22,020 --> 00:02:31,440
And I will say this one is inline elements as that when I save it, you can see how it is behaving for

28
00:02:31,440 --> 00:02:32,070
this one.

29
00:02:32,070 --> 00:02:39,000
You may not know the behavior of this one until I add a new element called Span.

30
00:02:39,000 --> 00:02:46,170
Again, for this one, I will change this one to span two so you could see the behavior of inline elements.

31
00:02:46,170 --> 00:02:49,140
This does not start on a new line.

32
00:02:49,170 --> 00:02:53,700
It hits the available space as much as it can.

33
00:02:53,700 --> 00:03:00,810
So if I style this one that way, you better understand the movement of this pattern element.

34
00:03:00,810 --> 00:03:04,620
So let's add some style attribute here and in there.

35
00:03:04,620 --> 00:03:07,530
We can add some CSS in here.

36
00:03:07,530 --> 00:03:13,230
So I want to style all this pattern and give it a background color called red.

37
00:03:13,230 --> 00:03:14,220
Now let's see.

38
00:03:14,220 --> 00:03:16,170
You can see how it's behaving.

39
00:03:16,200 --> 00:03:19,740
Let me change the color to white.

40
00:03:20,710 --> 00:03:21,500
As that.

41
00:03:21,500 --> 00:03:29,810
So the take note here is that in line element that is not hey, new line, but instead they move side

42
00:03:29,810 --> 00:03:35,360
by side and take the available space as much as it can.

43
00:03:35,660 --> 00:03:40,840
So let's say that you want this element to be on top of each other.

44
00:03:40,850 --> 00:03:49,430
Then what you can do is we need to use what is called block level element, and then you wrap them inside

45
00:03:49,490 --> 00:03:52,910
the way it should be on top of each other.

46
00:03:53,120 --> 00:03:59,330
If I add another tag, which is inline element, for example, button, let's see this.

47
00:03:59,330 --> 00:04:02,210
I'm going to be the register when I save it.

48
00:04:02,210 --> 00:04:10,460
You can see that they are all moving in one direction and this is the behavior of inline element.

49
00:04:10,610 --> 00:04:15,980
The next type of inline element is what we call the emphasize.

50
00:04:15,980 --> 00:04:20,240
So as that now called, this one has could.

51
00:04:22,320 --> 00:04:30,090
When I say it, you can see that how it is behaving so that the behaviour of inline elements.

52
00:04:30,090 --> 00:04:33,240
So what about block level elements?

53
00:04:33,270 --> 00:04:35,940
Let's have a look as that.

54
00:04:35,940 --> 00:04:42,260
And now down here is going to be block level element and block level elements.

55
00:04:42,270 --> 00:04:51,480
Let's write and see the behavior of block level element and example of block level element or footer

56
00:04:51,480 --> 00:05:00,900
for H one to access header, main navigation paragraph and the underlying code.

57
00:05:01,830 --> 00:05:04,150
So let's see them in action.

58
00:05:04,170 --> 00:05:11,480
Let's say I have let me add each one because each one is also a block level element.

59
00:05:11,490 --> 00:05:17,760
Our code is one block elements like when I save it, have a look.

60
00:05:17,760 --> 00:05:19,310
We have each one.

61
00:05:19,320 --> 00:05:26,700
If I add h two because it's a block level element is going to be on top of each other.

62
00:05:26,700 --> 00:05:30,180
And I'll call this one as block element two.

63
00:05:32,310 --> 00:05:33,210
Save it.

64
00:05:33,210 --> 00:05:41,670
And if you see the behavior of block level elements, remember paragraph two is a block level element.

65
00:05:41,670 --> 00:05:43,440
So let's add up and see.

66
00:05:43,440 --> 00:05:47,160
Our code is one as a paragraph.

67
00:05:47,820 --> 00:05:49,860
Now let's see when I save it.

68
00:05:49,860 --> 00:05:53,610
You can see that it is moving on top of each other.

69
00:05:53,700 --> 00:05:59,370
And as we said, block level element, it takes the available width.

70
00:05:59,370 --> 00:06:07,470
So if I add a color to the block level element, you can see how it's panning across the width.

71
00:06:07,500 --> 00:06:13,980
So let's see, let me add a class to the paragraph or the H one.

72
00:06:13,980 --> 00:06:16,800
So each one here, let me use the H tool.

73
00:06:16,890 --> 00:06:25,080
So for H to our mix of background color and this are going to be yellow, you can see how it is taking

74
00:06:25,080 --> 00:06:30,690
the available width and that is the behavior of block level element.

75
00:06:30,690 --> 00:06:36,120
And for block level elements we can add width and height to an element.

76
00:06:36,120 --> 00:06:41,560
So for edge two, let's say I want to have a width of say 20 pixels.

77
00:06:41,610 --> 00:06:48,390
Now let's see, you can see how I'm controlling the width of the particular element, let's say 90 pages.

78
00:06:48,390 --> 00:06:54,840
And if you see the behavior when I increased to say 200 and now you can see the behavior, let me increase

79
00:06:54,840 --> 00:06:57,510
more to five or 600.

80
00:06:57,510 --> 00:07:00,990
And now this is the behavior of that.

81
00:07:00,990 --> 00:07:08,610
And I can add height or weights also maybe 40 pixels and you can see how it is moving.

82
00:07:08,640 --> 00:07:11,250
Let me increase by C 90 or weight.

83
00:07:11,250 --> 00:07:15,900
And if you see that, I mean able to control the height of that element.

84
00:07:15,900 --> 00:07:23,970
So what about this pattern element for this one element, I want to add, let's say weight of let's

85
00:07:23,970 --> 00:07:25,770
see, ten pixels, let's see.

86
00:07:25,800 --> 00:07:31,380
You can see that nothing changes even if I add height to it better.

87
00:07:31,380 --> 00:07:34,890
So there would be no change on that.

88
00:07:34,890 --> 00:07:41,100
That is the behavior of inline and then block level element.

89
00:07:41,280 --> 00:07:47,970
As we also discussed, that block level element can take inline elements.

90
00:07:48,150 --> 00:07:56,640
Let's say I have a Dave and remember Dave is also block level elements and inside I have P, which is

91
00:07:56,640 --> 00:08:02,070
also block level elements and I add some dummy text inside.

92
00:08:02,070 --> 00:08:10,440
Now this is my dummy text and let's say that I want to give this text a particular color and I can use

93
00:08:10,440 --> 00:08:17,160
in line to style a specific text and that is how we normally use inline elements.

94
00:08:17,160 --> 00:08:24,090
So now let me copy this one or let me cut it and then let me put it inside span element as that.

95
00:08:24,090 --> 00:08:31,770
Now for this element, as soon as I added it, we see that it has taken the CSS property of red because

96
00:08:31,770 --> 00:08:39,630
we have specified here as what red as that does the behavior of inline elements.

97
00:08:39,630 --> 00:08:46,620
And let's say I want to underline this one, I'll cut it and then use you underline and put it inside.

98
00:08:46,620 --> 00:08:51,180
And now we see that I have underlined a specific text.

99
00:08:51,180 --> 00:09:00,030
So this is the behavior or if this are the behavior of inline and block level elements, understanding

100
00:09:00,030 --> 00:09:06,450
this property is going to help you to know how sometimes some elements behave.

101
00:09:06,480 --> 00:09:08,790
Maybe you may be asking that.

102
00:09:08,790 --> 00:09:14,940
How will you know that a particular element is a block level element or inline elements?

103
00:09:14,940 --> 00:09:16,800
And let me show you the clue.

104
00:09:16,830 --> 00:09:19,770
You can find them on the Internet, Google it.

105
00:09:19,780 --> 00:09:21,810
I'm going to have a lot of resources.

106
00:09:21,810 --> 00:09:25,590
Give me you all the inline elements, but let me show you my technique.

107
00:09:25,590 --> 00:09:32,460
If I want to know the behavior of an element or what I would do is I'm going to add a background color

108
00:09:32,460 --> 00:09:33,690
to that element.

109
00:09:33,720 --> 00:09:40,350
If I see that the colors span from left to right, which takes available space, then it is called block

110
00:09:40,350 --> 00:09:41,340
level element.

111
00:09:41,340 --> 00:09:43,470
This is my secret for you.

112
00:09:43,590 --> 00:09:44,010
All right.

113
00:09:44,010 --> 00:09:50,340
The next video, let's get started with how we will talk about positioning in CSS.