1
00:00:00,000 --> 00:00:04,650
now,

2
00:00:04,650 --> 00:00:10,350
time to understand block and in line elements that I talked to in previous video.

3
00:00:10,350 --> 00:00:13,210
In an HTML document,

4
00:00:13,210 --> 00:00:18,250
we can have these two types off elements block and in line.

5
00:00:18,250 --> 00:00:25,190
It's very important to understand the concept at the differences between these two types of

6
00:00:25,190 --> 00:00:31,180
elements that are widely using where pages to create different sections,

7
00:00:31,180 --> 00:00:41,970
starting with block elements a block element by default always start on a new line and

8
00:00:41,970 --> 00:00:43,350
occupy all the with,

9
00:00:43,350 --> 00:00:45,750
like some elements that you already know,

10
00:00:45,750 --> 00:00:46,920
like tariffs.

11
00:00:46,920 --> 00:00:55,910
Tables are forms and block elements stack up one on top off the other.

12
00:00:55,910 --> 00:01:06,060
I now create an example with the existing paragraphs where I define for the first a new

13
00:01:06,060 --> 00:01:07,120
property names,

14
00:01:07,120 --> 00:01:08,300
background color,

15
00:01:08,300 --> 00:01:11,610
death defying scholar to element backgrounds.

16
00:01:11,610 --> 00:01:14,910
For this example,

17
00:01:14,910 --> 00:01:22,230
I apply a background color with blue value that help us to see the spice occupied by the

18
00:01:22,230 --> 00:01:22,990
paragraph.

19
00:01:22,990 --> 00:01:27,670
You see that after using the property,

20
00:01:27,670 --> 00:01:31,230
the paragraph occupies the entire with off the page.

21
00:01:31,230 --> 00:01:32,370
Like I said,

22
00:01:32,370 --> 00:01:35,170
that happens with block elements.

23
00:01:35,170 --> 00:01:40,840
If I simply leave the paragraph with a few words,

24
00:01:40,840 --> 00:01:44,980
you see that paragraph continues to occupy the full with.

25
00:01:44,980 --> 00:01:52,230
If I define background color to second paragraph you see,

26
00:01:52,230 --> 00:01:54,980
the second paragraph is below first,

27
00:01:54,980 --> 00:01:56,630
occupying again,

28
00:01:56,630 --> 00:02:03,990
all the with I introduced now a new important block element did.

29
00:02:03,990 --> 00:02:15,260
If represented by DIF Tech Network as a container having a start and ending tech and is one

30
00:02:15,260 --> 00:02:19,420
off the most used to create different sections in a webpage,

31
00:02:19,420 --> 00:02:23,550
allowing to put and separate the contents off the page,

32
00:02:23,550 --> 00:02:30,650
the settlement works like tariff and other block elements occupying all the hydrates.

33
00:02:30,650 --> 00:02:35,240
I now define a section in my code,

34
00:02:35,240 --> 00:02:42,850
using def that contains the two paragraphs that I m in the page and give glass name

35
00:02:42,850 --> 00:02:53,670
container to this new element in my CSS coat I defined for this class a green collar

36
00:02:53,670 --> 00:02:58,450
backgrounds and the padding off 10 pixels.

37
00:02:58,450 --> 00:03:02,870
After these changes,

38
00:03:02,870 --> 00:03:09,280
you can see that our paragraphs are inside these elements that occupies all the page wreath

39
00:03:09,280 --> 00:03:09,280
.

40
00:03:09,280 --> 00:03:20,410
Now it's time for the in line elements and in line element does not start on the new line

41
00:03:20,410 --> 00:03:25,330
and only takes up as much with as necessary.

42
00:03:25,330 --> 00:03:27,940
What not happens with block elements.

43
00:03:27,940 --> 00:03:35,240
Examples like images are April Inc elements represent in line elements.

44
00:03:35,240 --> 00:03:44,670
I now creating my coat a text with April ing to see that this ailment does not like a by

45
00:03:44,670 --> 00:03:45,620
the full wheat.

46
00:03:45,620 --> 00:03:49,160
For these,

47
00:03:49,160 --> 00:03:57,920
I use a tech for April ink and some texts into CSS cold.

48
00:03:57,920 --> 00:03:59,740
I set now for the settlements,

49
00:03:59,740 --> 00:04:05,250
a red color backgrounds and looking to the page.

50
00:04:05,250 --> 00:04:11,700
You see that this element occupies only the spice off its content.

51
00:04:11,700 --> 00:04:14,750
What not happens with the paragraphs?

52
00:04:14,750 --> 00:04:22,070
After having used a new block element,

53
00:04:22,070 --> 00:04:22,650
Deve,

54
00:04:22,650 --> 00:04:26,370
I use now a new in line element,

55
00:04:26,370 --> 00:04:35,250
the element span that is represented using this Pantech debt as a start an ending tech.

56
00:04:35,250 --> 00:04:44,350
I now use the first tariff and puts involved text inside this new element.

57
00:04:44,350 --> 00:04:50,890
If I said this element to a gray color background,

58
00:04:50,890 --> 00:04:58,060
you see that only the content that is inside the stack is affected by the background color

59
00:04:58,060 --> 00:05:01,790
working like an in line element.

60
00:05:01,790 --> 00:05:05,430
Okay,

61
00:05:05,430 --> 00:05:06,260
in resume,

62
00:05:06,260 --> 00:05:10,950
we can have two types of elements block aunt in line.

63
00:05:10,950 --> 00:05:17,210
The block elements occupy the entire with off the page like deep debt we created with

64
00:05:17,210 --> 00:05:26,100
background color green and the paragraphs with blue background color deadline elements do

65
00:05:26,100 --> 00:05:29,110
not take a pitiful wheat being.

66
00:05:29,110 --> 00:05:35,640
The example used in the speech and Nipper link with rev background color and the new span

67
00:05:35,640 --> 00:05:41,280
elements with background color gray Thanks