1 00:00:00,000 --> 00:00:09,510 cascading style sheets used different units for expressing the length. 2 00:00:09,510 --> 00:00:11,890 Many CSS properties, 3 00:00:11,890 --> 00:00:15,640 such as with bedding margin and fun size, 4 00:00:15,640 --> 00:00:17,290 take land values. 5 00:00:17,290 --> 00:00:20,340 Where lent is a number followed violence unit, 6 00:00:20,340 --> 00:00:22,550 such as pixels unit. 7 00:00:22,550 --> 00:00:26,000 Like I used in many previous examples, 8 00:00:26,000 --> 00:00:36,440 we can use two types of length units in CSS related and absolute starting with relating 9 00:00:36,440 --> 00:00:37,580 lengths units, 10 00:00:37,580 --> 00:00:38,750 they specify. 11 00:00:38,750 --> 00:00:41,310 A lint related with another Linz. 12 00:00:41,310 --> 00:00:49,190 One great advantage in style sheets that use related units is that you can easily scale 13 00:00:49,190 --> 00:00:52,460 from one will put the environment to another, 14 00:00:52,460 --> 00:00:55,840 like from a dressed up to a smartphone, 15 00:00:55,840 --> 00:00:58,270 creating responsive content. 16 00:00:58,270 --> 00:01:02,940 Let's see now the most important related units, 17 00:01:02,940 --> 00:01:09,270 starting with E M unit in CSS and the end unit, 18 00:01:09,270 --> 00:01:15,440 is equal to the computed front size for the element to which the M is applied. 19 00:01:15,440 --> 00:01:17,960 When I am, 20 00:01:17,960 --> 00:01:23,160 units are declared on child elements that don't have a fun size define. 21 00:01:23,160 --> 00:01:30,960 They will inherit their phone size from their parents or from another ancestor elements 22 00:01:30,960 --> 00:01:36,750 possibly going all the way back to the root element under documents. 23 00:01:36,750 --> 00:01:45,110 Let's see the following example to better understand I f. 24 00:01:45,110 --> 00:01:54,250 Two paragraphs first and seconds inserted inside a Deve with glass name content. 25 00:01:54,250 --> 00:01:59,770 I now set my class first. 26 00:01:59,770 --> 00:02:03,350 We the font size off 15 pixels. 27 00:02:03,350 --> 00:02:05,190 And as I said, 28 00:02:05,190 --> 00:02:11,200 one AM unit is equal to the font size value created for the element. 29 00:02:11,200 --> 00:02:14,660 So if I creates the line, 30 00:02:14,660 --> 00:02:17,840 I'd property in the same ailment with the Valley. 31 00:02:17,840 --> 00:02:19,050 One e m. 32 00:02:19,050 --> 00:02:24,930 Corresponds to a value off 15 pixels to the property line. 33 00:02:24,930 --> 00:02:31,510 I've If I give a value off two PM tow line, 34 00:02:31,510 --> 00:02:40,390 it receives the value off two times 15 pixels that corresponds to 30 pixels. 35 00:02:40,390 --> 00:02:50,770 I now set a value off 12 pixels to the font size off the class content. 36 00:02:50,770 --> 00:02:53,740 As you see the text, 37 00:02:53,740 --> 00:02:57,550 is inheriting the value set in their parent, 38 00:02:57,550 --> 00:03:05,610 a situation that happens only on second class because this class has no defined fun size. 39 00:03:05,610 --> 00:03:14,050 If I now define a phone size off 14 pixels in class seconds, 40 00:03:14,050 --> 00:03:20,880 you check that The second paragraph assumes different size created in class seconds. 41 00:03:20,880 --> 00:03:28,730 And when I had the line with value off 1 a.m. This time for class Second, 42 00:03:28,730 --> 00:03:35,650 this property calculates the valley for the light ICT related to the farting pixels that I 43 00:03:35,650 --> 00:03:38,100 define within the glass itself. 44 00:03:38,100 --> 00:03:43,700 Any changes I make in different size. 45 00:03:43,700 --> 00:03:50,350 Off the class content will not affect the properties created in the paragraphs because they 46 00:03:50,350 --> 00:03:53,770 themselves have the font size property defined. 47 00:03:53,770 --> 00:03:59,050 If you understand well, 48 00:03:59,050 --> 00:04:01,260 all the M unit works, 49 00:04:01,260 --> 00:04:05,670 then it's easy to understand the new R E M unit. 50 00:04:05,670 --> 00:04:16,460 This unit is related two different size off route element HTML that my default is 16 pixels 51 00:04:16,460 --> 00:04:16,460 , 52 00:04:16,460 --> 00:04:19,450 but this value can be changed by the user. 53 00:04:19,450 --> 00:04:22,730 I know. 54 00:04:22,730 --> 00:04:29,800 Make a simple example to distinguish the two units in my root HTML element. 55 00:04:29,800 --> 00:04:33,550 I set off on size off 14 pixels, 56 00:04:33,550 --> 00:04:41,570 while India def content define phone size with value to R E M. 57 00:04:41,570 --> 00:04:44,990 For the paragraphs, 58 00:04:44,990 --> 00:04:51,960 I have the values one R E M for the first and one PM for the seconds. 59 00:04:51,960 --> 00:04:54,850 What happens now? 60 00:04:54,850 --> 00:04:58,850 The first paragraph that as diarrhea, 61 00:04:58,850 --> 00:05:06,170 Munitz will calculate the value related to the farting pixels defines in the root element. 62 00:05:06,170 --> 00:05:07,520 Well, 63 00:05:07,520 --> 00:05:11,550 then ever fun size off 14 pixels, 64 00:05:11,550 --> 00:05:21,010 while the second element will make the calculation related to the parent content as the 65 00:05:21,010 --> 00:05:26,330 parent content is two times bigger than the value defined in route size, 66 00:05:26,330 --> 00:05:32,500 the size in content is 28 pixels, 67 00:05:32,500 --> 00:05:42,330 which will also be the value for the second paragraph if I change HTML Phone size. 68 00:05:42,330 --> 00:05:43,420 Real effect, 69 00:05:43,420 --> 00:05:44,370 as expected, 70 00:05:44,370 --> 00:05:45,780 The two paragraphs. 71 00:05:45,780 --> 00:05:48,890 Finally, 72 00:05:48,890 --> 00:05:51,530 I changed from size for def content, 73 00:05:51,530 --> 00:05:59,420 with value 12 pixels changing toe An absolute unit for this situation. 74 00:05:59,420 --> 00:06:01,900 If I change HTML font size, 75 00:06:01,900 --> 00:06:10,350 you only see changes in first paragraph because now second paragraph on size is related to 76 00:06:10,350 --> 00:06:14,250 the 12 pixels that I define in class content. 77 00:06:14,250 --> 00:06:22,150 Now the view part percentage lance related to the size off the window brother. 78 00:06:22,150 --> 00:06:27,490 When the ICT or with off the bras Aries change, 79 00:06:27,490 --> 00:06:29,490 they are scale accordingly. 80 00:06:29,490 --> 00:06:36,230 The use of these units related to the view part are important because they adapt the size 81 00:06:36,230 --> 00:06:44,010 off the contents to the size off the devices we can ever for possible different units 82 00:06:44,010 --> 00:06:46,070 related with view part. 83 00:06:46,070 --> 00:06:54,380 The 1st 2 are the unity Age that is related to 1% off the ICT. 84 00:06:54,380 --> 00:07:02,740 Off the view part initial containing block that is our brother Window and the Visa Lou that 85 00:07:02,740 --> 00:07:06,650 is related to 1% off the wit off the view part. 86 00:07:06,650 --> 00:07:10,140 In this example, 87 00:07:10,140 --> 00:07:12,700 we see two gifts creators, 88 00:07:12,700 --> 00:07:19,180 the first being identified by the other class and the second by the content class. 89 00:07:19,180 --> 00:07:30,140 I create now styles for these two classes by defining the 1st 1 with a light green 90 00:07:30,140 --> 00:07:36,850 background color and the second with light blue color. 91 00:07:36,850 --> 00:07:47,830 If I want the first gift to occupy off off the with and I've I just need to set do with to 92 00:07:47,830 --> 00:07:57,250 a value off 50 V W and the IDs to 50 V h. 93 00:07:57,250 --> 00:08:04,150 We can see that as I resize the window, 94 00:08:04,150 --> 00:08:07,650 it will always occupy off off the with, 95 00:08:07,650 --> 00:08:13,770 and I'd space Now far did, 96 00:08:13,770 --> 00:08:14,990 if content, 97 00:08:14,990 --> 00:08:20,150 I want that this element occupy 1/4 off the size off the window. 98 00:08:20,150 --> 00:08:23,680 To get this behavior. 99 00:08:23,680 --> 00:08:31,270 I just need to set the value to develop 25 end the age to the same value. 100 00:08:31,270 --> 00:08:34,830 In this example, 101 00:08:34,830 --> 00:08:40,100 Dave's occupy 75% off the view port. 102 00:08:40,100 --> 00:08:45,370 I've if I want them to occupy all their eyes, 103 00:08:45,370 --> 00:08:54,550 just need to give each of them a value off 50 or another combination of values in which the 104 00:08:54,550 --> 00:08:57,250 same off the two East 1/100. 105 00:08:57,250 --> 00:09:09,010 The last two units that use you part RV men and V Max units did allow you to access the 106 00:09:09,010 --> 00:09:16,650 size off the smaller or larger size off the view port if he used the men. 107 00:09:16,650 --> 00:09:22,610 You calculate a land that is related to 1% off the view port. 108 00:09:22,610 --> 00:09:30,030 Smaller dimension and using remix is related to 1% off the view port. 109 00:09:30,030 --> 00:09:31,480 Largest dimension. 110 00:09:31,480 --> 00:09:39,780 You will now see an example where I have to block elements defined by the other class at 111 00:09:39,780 --> 00:09:43,650 the top and content class below the other, 112 00:09:43,650 --> 00:09:46,450 I said. 113 00:09:46,450 --> 00:09:50,560 Now the ICT off these two thieves for the other. 114 00:09:50,560 --> 00:10:00,850 I define a write off 20 mean and for the glass contento right off 250 pixels. 115 00:10:00,850 --> 00:10:10,970 As you might expect for discontent class the it does not change because we are using an 116 00:10:10,970 --> 00:10:14,710 absolute value for the other. 117 00:10:14,710 --> 00:10:15,320 Right? 118 00:10:15,320 --> 00:10:25,810 I used TV Men unit with Value 20 which makes it occupy 20% of related to the smaller size 119 00:10:25,810 --> 00:10:31,130 off the view part in the browser, 120 00:10:31,130 --> 00:10:35,350 you can see the expected behavior using this unit. 121 00:10:35,350 --> 00:10:38,010 At this point, 122 00:10:38,010 --> 00:10:42,560 I have the view port where the smaller size is the ICT. 123 00:10:42,560 --> 00:10:51,520 So the ID for the other is related to the ICT off the view part that as the small size as I 124 00:10:51,520 --> 00:10:52,950 resize the window, 125 00:10:52,950 --> 00:10:59,570 the other I do not change because the view part right does not increase our decrees. 126 00:10:59,570 --> 00:11:07,400 When I get to a point where the with off the view port becomes smaller than the eye, 127 00:11:07,400 --> 00:11:12,600 I start having changes in the ID of the other as it is happening now, 128 00:11:12,600 --> 00:11:17,550 because the smaller size of the view part is now changing. 129 00:11:17,550 --> 00:11:25,550 If I return to the situation where the ID of the view parties the smaller size, 130 00:11:25,550 --> 00:11:28,910 if I change the eye of the view port, 131 00:11:28,910 --> 00:11:33,390 it suspected to ever change in the eyes off the other again. 132 00:11:33,390 --> 00:11:38,000 Finally, 133 00:11:38,000 --> 00:11:40,730 if you use for this example the V Max, 134 00:11:40,730 --> 00:11:47,510 I have a change in the eat off the other this time related to the larger size off the view 135 00:11:47,510 --> 00:11:47,510 . 136 00:11:47,510 --> 00:11:53,410 Parts at this moment do with off the view part as the largest size, 137 00:11:53,410 --> 00:11:59,750 so changing do with I ever changing the ice off the element other. 138 00:11:59,750 --> 00:12:06,100 Let's now see the units in percentage. 139 00:12:06,100 --> 00:12:11,900 This type of unit is very similar to the units related to the size of the view part, 140 00:12:11,900 --> 00:12:15,320 but instead of using the view part as a reference, 141 00:12:15,320 --> 00:12:21,800 it uses the ailment parents in this next example will be clear. 142 00:12:21,800 --> 00:12:27,850 This behavior where I f another element that will contain within the contents. 143 00:12:27,850 --> 00:12:37,730 Dif and I will define this same content dif outside the other for one off. 144 00:12:37,730 --> 00:12:45,820 The case is the parent off content element is the dif ever and for the other content dif 145 00:12:45,820 --> 00:12:46,420 outside. 146 00:12:46,420 --> 00:12:49,470 The other element body is the parents. 147 00:12:49,470 --> 00:13:01,350 I will now give a with off 800 pixels to the other elements and the Eid off 300 pixels. 148 00:13:01,350 --> 00:13:05,200 In the content class, 149 00:13:05,200 --> 00:13:10,880 I define a with with the percentage off 50%. 150 00:13:10,880 --> 00:13:19,980 What will happen is that for the case off the def content inside the other do. 151 00:13:19,980 --> 00:13:26,980 It will be 50% off the with off the other that is a fixed value. 152 00:13:26,980 --> 00:13:36,820 So do it will be 400 pixels for the class content defined below the other. 153 00:13:36,820 --> 00:13:42,880 The width will be defined in relation to the body which causes death. 154 00:13:42,880 --> 00:13:50,950 Rece izing the window do with off the ailment will not be fixed to finish the absolute lent 155 00:13:50,950 --> 00:13:54,950 units that are fixed and very easy to understand. 156 00:13:54,950 --> 00:14:01,470 They always have the same size regardless of any other alighted settings. 157 00:14:01,470 --> 00:14:08,880 They are highly dependent on the output reason why they are not recommended for use on 158 00:14:08,880 --> 00:14:13,050 screen because screen sizes very so much. 159 00:14:13,050 --> 00:14:20,220 One of the most used is pixels that I used in many examples, 160 00:14:20,220 --> 00:14:24,240 being a unit that is related to the viewing device. 161 00:14:24,240 --> 00:14:30,760 Other absolute units that are available like inches, 162 00:14:30,760 --> 00:14:33,580 centimeters or millimeters. 163 00:14:33,580 --> 00:14:37,070 In previous chapters, 164 00:14:37,070 --> 00:14:39,540 I used pixels as units, 165 00:14:39,540 --> 00:14:47,500 so I will now change this unit two centimeters in the brother. 166 00:14:47,500 --> 00:14:51,080 We continue to F elements with fixed sizes, 167 00:14:51,080 --> 00:14:54,580 since I'm using an absolute unit.