1 00:00:00,910 --> 00:00:05,200 In this lecture you're going to look at CSSA box model. 2 00:00:05,560 --> 00:00:11,940 And this is the year you will really start to style the page using Boxleitner. 3 00:00:12,100 --> 00:00:13,950 Take a look at this diagram. 4 00:00:14,020 --> 00:00:15,940 There were four boxes. 5 00:00:16,030 --> 00:00:20,210 There is a content box bedding box motor box and much in box. 6 00:00:20,280 --> 00:00:24,450 And I'm going to talk about each one of these in this lecture. 7 00:00:25,460 --> 00:00:30,730 The first box is of course is the content box and we have been using it. 8 00:00:31,130 --> 00:00:33,390 Everything goes inside it. 9 00:00:33,560 --> 00:00:36,430 If it is it takes images video. 10 00:00:36,650 --> 00:00:40,250 Everything was inside this content box. 11 00:00:40,250 --> 00:00:49,700 Every single element on a web page has these four boxes on the margin border and padding boxes are invisible 12 00:00:49,820 --> 00:00:51,640 unless we specify them. 13 00:00:51,730 --> 00:00:57,970 The painting is invisible border is invisible and the margin is also invisible. 14 00:00:57,980 --> 00:01:03,200 Let us experiment with these four boxes. 15 00:01:03,230 --> 00:01:06,530 This is a page from simple business web page. 16 00:01:06,860 --> 00:01:12,530 Let me show you the box model in a crumbling school because this is the best way to see these boxes 17 00:01:12,530 --> 00:01:14,050 in action. 18 00:01:14,240 --> 00:01:20,680 Click on Hedding. 19 00:01:20,780 --> 00:01:26,910 So this is the box model for H2 element. 20 00:01:26,970 --> 00:01:29,280 You can see this is the content box. 21 00:01:29,280 --> 00:01:30,870 This is the betting box. 22 00:01:30,870 --> 00:01:32,100 This is the border box. 23 00:01:32,310 --> 00:01:33,480 And this is the model. 24 00:01:33,780 --> 00:01:37,830 This model is applied by the Groll bros itself. 25 00:01:44,000 --> 00:01:50,830 What example if I add one pixel to green include. 26 00:01:50,950 --> 00:01:56,100 Now this is the content and this is the border around this element. 27 00:01:59,530 --> 00:01:59,930 Brading 28 00:02:02,670 --> 00:02:06,450 EXOR and pixel 29 00:02:09,920 --> 00:02:14,590 conflicts are Antrix. 30 00:02:14,790 --> 00:02:20,670 Now do you see the green bodies on the element. 31 00:02:20,790 --> 00:02:23,360 This is bedding and this is barter. 32 00:02:23,370 --> 00:02:25,950 There is some margin guarantee 33 00:02:29,280 --> 00:02:32,730 and keep some contributes 34 00:02:36,070 --> 00:02:37,090 and can decrease 35 00:02:46,280 --> 00:02:50,460 in Saudi and you can take weeks earlier. 36 00:02:50,550 --> 00:02:51,700 This is the bottom. 37 00:02:51,870 --> 00:02:52,350 OK. 38 00:02:52,380 --> 00:02:53,790 This is a concurrent itself. 39 00:02:53,940 --> 00:02:55,540 This is depending on the content. 40 00:02:55,650 --> 00:02:56,770 This is the border. 41 00:02:56,940 --> 00:03:02,550 And this is the margin you see these orange box on the element. 42 00:03:02,610 --> 00:03:04,070 So this is the box order 43 00:03:06,970 --> 00:03:14,890 birding is used to generate spaces are all contained the margin is also used to generate space around 44 00:03:14,890 --> 00:03:22,120 the content but outside of the box is just a border or an element. 45 00:03:22,540 --> 00:03:29,620 So this is just good idea about this box and order in the next lecture you learn about thesis classes 46 00:03:30,070 --> 00:03:31,050 and ideas. 47 00:03:31,120 --> 00:03:33,430 It is very important to lecture to the.