1 00:00:00,850 --> 00:00:01,450 ‫Hey, there. 2 00:00:01,600 --> 00:00:03,340 ‫Welcome back, everyone this side. 3 00:00:03,700 --> 00:00:10,960 ‫Welcome to this new section about CFS, what it is, how we are going to utilize it, why it is important, 4 00:00:11,170 --> 00:00:13,690 ‫everything we are going to discuss any day. 5 00:00:14,600 --> 00:00:18,270 ‫The first thing is CFS is known as cascading style. 6 00:00:19,180 --> 00:00:21,700 ‫And this information is going to be of no use. 7 00:00:22,180 --> 00:00:25,190 ‫But let's discuss what it is and how we are going to utilize. 8 00:00:25,780 --> 00:00:29,140 ‫We use this to give styling to our current structure. 9 00:00:29,560 --> 00:00:37,420 ‫So as you know, we utilize HDMI designed a structure of our website, a about different dogs, understand 10 00:00:37,420 --> 00:00:40,870 ‫about different attributes and how we can structure content. 11 00:00:41,380 --> 00:00:48,580 ‫Now it's time for us to understand how we can make that content look good so you can create a paragraph, 12 00:00:48,580 --> 00:00:50,050 ‫add some text you can use. 13 00:00:50,050 --> 00:00:50,910 ‫I am your dog. 14 00:00:50,920 --> 00:00:52,120 ‫I had some image. 15 00:00:52,570 --> 00:00:56,140 ‫You can do a lot of things, but how to present that content? 16 00:00:56,470 --> 00:01:02,290 ‫We now have structure, but we need some understanding about these styling, these design. 17 00:01:02,770 --> 00:01:05,140 ‫That's where this whole thing coming out. 18 00:01:05,200 --> 00:01:05,680 ‫Picture. 19 00:01:06,220 --> 00:01:09,570 ‫Now in this section, we are going to understand about whole styling. 20 00:01:09,970 --> 00:01:14,890 ‫And then we will merge our knowledge about HDMI and CFS and build some project. 21 00:01:15,490 --> 00:01:18,460 ‫Now let's start our journey of a test and write some code. 22 00:01:18,880 --> 00:01:23,350 ‫So there are multiple ways by which we can add access to our current HTML file. 23 00:01:23,740 --> 00:01:26,500 ‫I'm not going to discuss all of them right now. 24 00:01:26,590 --> 00:01:28,930 ‫We will understand them one by one. 25 00:01:29,290 --> 00:01:33,580 ‫But for now, let's start with the common methodologies external file. 26 00:01:34,150 --> 00:01:39,910 ‫So what I'm going to do is I'm going to link my CSV file here, but I don't have one. 27 00:01:39,910 --> 00:01:46,070 ‫What I'm going to do is I'm going to create my own new file and just give styluses. 28 00:01:48,320 --> 00:01:51,350 ‫So that's the name of our file, which has filed our test. 29 00:01:51,740 --> 00:01:57,260 ‫You can write any other name, but this is the most common one for the entire web, actually. 30 00:01:57,920 --> 00:02:02,220 ‫So if you start walking with CFS, people usually call it styluses. 31 00:02:02,900 --> 00:02:05,210 ‫So head, I'm going to link it in memory. 32 00:02:05,220 --> 00:02:06,140 ‫I use Link. 33 00:02:06,140 --> 00:02:09,470 ‫Then that's stylesheet, which is the relation and head. 34 00:02:09,470 --> 00:02:13,070 ‫I'm going to call this as my style or CSIS. 35 00:02:14,000 --> 00:02:19,910 ‫Now, once we have multiple cases file, we usually create a folder first and then add all of them. 36 00:02:20,240 --> 00:02:21,380 ‫So it's a common practice. 37 00:02:21,380 --> 00:02:22,760 ‫As a beginner, you can do that. 38 00:02:23,420 --> 00:02:29,780 ‫Now, everything we are going to write inside this file that is our CSI score will affect our complete 39 00:02:29,780 --> 00:02:30,290 ‫body. 40 00:02:30,920 --> 00:02:31,930 ‫Remember this fact? 41 00:02:32,270 --> 00:02:38,870 ‫So it's important for us to write things inside this for all this filing purpose and it really affect 42 00:02:38,870 --> 00:02:40,070 ‫everything that we write. 43 00:02:40,670 --> 00:02:45,470 ‫So let me take one common example maybe let's create multiple heading. 44 00:02:52,580 --> 00:02:58,780 ‫OK, so now we have these three hurting what my task is going to be, add some color or edge one bag. 45 00:02:59,240 --> 00:03:06,210 ‫So here let me jump on to my access now how great to see if the first thing is we write these selector 46 00:03:06,230 --> 00:03:06,560 ‫back. 47 00:03:06,860 --> 00:03:10,610 ‫What I'm going to select and basically what I need to customize. 48 00:03:10,790 --> 00:03:13,240 ‫Here I am writing each one down. 49 00:03:13,730 --> 00:03:16,370 ‫OK, then use these braces. 50 00:03:16,880 --> 00:03:22,190 ‫Now I need you to find a property that is what property I need to edit and then value. 51 00:03:22,490 --> 00:03:25,160 ‫What is the value that I'm providing to that property? 52 00:03:25,310 --> 00:03:29,330 ‫For example, I'm going to change color, so I'm going to use color. 53 00:03:29,450 --> 00:03:33,620 ‫This is the property colon, and then I need to provide the value. 54 00:03:34,010 --> 00:03:37,820 ‫The most common thing here is you can either give the value name. 55 00:03:38,210 --> 00:03:42,680 ‫You can either provide the hex color or you can provide the IGB color. 56 00:03:43,070 --> 00:03:44,570 ‫So I totally depend on you. 57 00:03:45,050 --> 00:03:50,300 ‫We'll be discussing about this during the college lecture, so I kindly let me provide the most common 58 00:03:50,300 --> 00:03:50,570 ‫one. 59 00:03:50,960 --> 00:03:52,820 ‫I can use any one of them. 60 00:03:54,720 --> 00:03:59,220 ‫Maybe not to say if I say dark blue here and then use semicolon. 61 00:03:59,610 --> 00:04:01,140 ‫Let me save this one now. 62 00:04:01,140 --> 00:04:04,140 ‫If I jump back here, you can see it's dark blue. 63 00:04:04,410 --> 00:04:05,480 ‫Let me try something else. 64 00:04:05,520 --> 00:04:07,080 ‫It's much easier to. 65 00:04:08,930 --> 00:04:10,910 ‫And her ongoing views. 66 00:04:13,830 --> 00:04:16,990 ‫And the Blue Winery quarter, I save this one. 67 00:04:17,010 --> 00:04:17,850 ‫Get back here. 68 00:04:18,300 --> 00:04:19,710 ‫OK, this is qualified. 69 00:04:20,100 --> 00:04:21,360 ‫I hope you got the idea. 70 00:04:21,840 --> 00:04:24,090 ‫Basic thing, this is going to be Selecter. 71 00:04:24,390 --> 00:04:26,010 ‫This is going to be our property. 72 00:04:26,190 --> 00:04:27,540 ‫This is going to be our value. 73 00:04:28,290 --> 00:04:29,900 ‫Now we can add multiple values. 74 00:04:29,910 --> 00:04:31,970 ‫All I could do is add the next value. 75 00:04:31,980 --> 00:04:35,010 ‫So maybe I want to customize the font size. 76 00:04:35,010 --> 00:04:37,130 ‫Maybe I want to change the foreign family. 77 00:04:37,150 --> 00:04:38,640 ‫Maybe I want to do anything else. 78 00:04:39,060 --> 00:04:45,570 ‫Now here, remember, you don't need to remember all these property names as we move forward, you will 79 00:04:45,570 --> 00:04:46,920 ‫understand more about them. 80 00:04:47,070 --> 00:04:51,150 ‫If you write anything, you will get citation by default with this code. 81 00:04:51,540 --> 00:04:54,320 ‫You don't have to remember every single thing. 82 00:04:54,330 --> 00:04:59,910 ‫Remember, as we grow, you will understand them and you will have common names in your mind. 83 00:04:59,940 --> 00:05:02,330 ‫By default, don't remember them. 84 00:05:02,340 --> 00:05:05,600 ‫They are going to be lot of property for phone itself. 85 00:05:06,120 --> 00:05:11,850 ‫Maybe here if I write Border Bill, you can see there are tons of property you don't need to remember. 86 00:05:12,150 --> 00:05:17,200 ‫The first thing is you just need to understand if you are and you will understand their relation with 87 00:05:17,200 --> 00:05:17,640 ‫that nurse. 88 00:05:18,090 --> 00:05:20,640 ‫So this is the basic task of a test. 89 00:05:21,530 --> 00:05:25,070 ‫We select a bag and then just this property. 90 00:05:26,210 --> 00:05:31,520 ‫Now, if you remember, we discussed about it as well as we have discussed about classes. 91 00:05:31,910 --> 00:05:33,360 ‫Now we are going to utilize it. 92 00:05:33,380 --> 00:05:36,270 ‫It's pretty important during our citizens journey. 93 00:05:36,950 --> 00:05:44,240 ‫For example, I have several feedbacks, let me call them lorem then and let me pick few dogs. 94 00:05:55,310 --> 00:06:01,610 ‫Now ahead, I have multiple Blue Dogs, and maybe my requirement is I need to add customization to only 95 00:06:01,610 --> 00:06:08,180 ‫alternative tags, that means alternative products, so maybe I want to add color to this one and color 96 00:06:08,180 --> 00:06:09,080 ‫to this one only. 97 00:06:09,890 --> 00:06:13,440 ‫So if I need to do something like this, I can use glass here. 98 00:06:13,460 --> 00:06:17,720 ‫What I can do is I can add a class and call this as alternative. 99 00:06:19,010 --> 00:06:21,830 ‫And something similar I knew to perform with this. 100 00:06:23,620 --> 00:06:25,510 ‫Let me minimize this side. 101 00:06:26,060 --> 00:06:26,350 ‫Yeah. 102 00:06:26,740 --> 00:06:34,990 ‫So I can do something like this and then I can attack this, I should say I can select this and add 103 00:06:34,990 --> 00:06:40,540 ‫some property if I jump here and I just need to use alternative. 104 00:06:40,780 --> 00:06:41,920 ‫That is my last name. 105 00:06:41,950 --> 00:06:47,080 ‫Now remember, whenever we are attacking our class name, or I should say, targeting our class name, 106 00:06:47,080 --> 00:06:51,040 ‫selecting our class name, basically, we need to use this dark. 107 00:06:51,160 --> 00:06:55,720 ‫Remember this when we are directly choosing an element of dog? 108 00:06:55,810 --> 00:06:58,330 ‫We use H1 or be dog. 109 00:06:58,330 --> 00:07:06,100 ‫Whatever the tag is, when we are targeting any type of class, then we use these start before our class 110 00:07:06,100 --> 00:07:06,370 ‫name. 111 00:07:06,700 --> 00:07:07,570 ‫So that's it. 112 00:07:07,570 --> 00:07:09,350 ‫And then I can define a color. 113 00:07:09,370 --> 00:07:11,320 ‫Maybe I want to add something like this. 114 00:07:11,960 --> 00:07:16,750 ‫If I get back here, you can see all these alternatives are in a different color. 115 00:07:18,840 --> 00:07:20,850 ‫I showed you the spectacular technically. 116 00:07:23,290 --> 00:07:30,250 ‫Maybe this and if I see this one get back here, you can see all these alternative ones have some different 117 00:07:30,250 --> 00:07:30,620 ‫color. 118 00:07:31,250 --> 00:07:35,770 ‫Now it's important for you to understand that that's how we utilize glass. 119 00:07:36,100 --> 00:07:39,640 ‫But suppose if I want to select this particular one among these two? 120 00:07:40,150 --> 00:07:41,650 ‫So we have this one on this one. 121 00:07:41,950 --> 00:07:48,550 ‫If I want to select this particular one, what I can use is, and I suppose this is a paragraph that 122 00:07:48,550 --> 00:07:51,340 ‫is going to have some information related to a player. 123 00:07:51,340 --> 00:07:56,980 ‫Or maybe we are discussing about travel so I can have I.D. names, according to location. 124 00:07:57,340 --> 00:08:03,250 ‫Maybe this paragraph has information related to London, maybe New York, so I can give our I.D. as 125 00:08:03,250 --> 00:08:05,320 ‫NYC get back here. 126 00:08:05,320 --> 00:08:13,270 ‫And then if I need to attack, target or select this dedicated paragraph itself, then I can use this 127 00:08:13,270 --> 00:08:16,030 ‫NYC that has hash for IDs. 128 00:08:16,030 --> 00:08:19,570 ‫Remember NYC and then I can add information. 129 00:08:19,840 --> 00:08:23,650 ‫So maybe I want a different color, or maybe I want to change on site? 130 00:08:23,770 --> 00:08:25,570 ‫Or now let's use these colors. 131 00:08:26,140 --> 00:08:28,270 ‫That is easy to understand and visualize. 132 00:08:28,690 --> 00:08:30,350 ‫So I'm going to select this one. 133 00:08:30,790 --> 00:08:31,630 ‫Save this one. 134 00:08:31,810 --> 00:08:32,590 ‫Get back here. 135 00:08:33,040 --> 00:08:34,500 ‫Now this is a different color. 136 00:08:34,570 --> 00:08:38,350 ‫This one is these two are different color, and this is our current color. 137 00:08:39,070 --> 00:08:41,080 ‫So that's the basic floor work. 138 00:08:41,800 --> 00:08:46,180 ‫We will talk about everything else, but here you need to understand the force point. 139 00:08:46,540 --> 00:08:53,530 ‫How to add your see as this file, which is through link and we created a style dirtiest, not the most 140 00:08:53,530 --> 00:08:54,160 ‫common thing. 141 00:08:54,820 --> 00:09:02,440 ‫And the second thing we have to discusses how to add property and value dual element so we can either 142 00:09:02,440 --> 00:09:05,890 ‫use tag directly or we can use Dot and then the class name. 143 00:09:05,890 --> 00:09:11,410 ‫If you hover over this, you can see we have some element and the glasses alternative, then we can 144 00:09:11,410 --> 00:09:14,440 ‫utilize this I.D. We can go to element. 145 00:09:14,440 --> 00:09:15,970 ‫And then it was too. 146 00:09:16,570 --> 00:09:22,690 ‫Now here one important thing if you hover to +1, if you see this specific score, that means how we 147 00:09:22,690 --> 00:09:24,670 ‫are selecting it as a Euro zero one. 148 00:09:25,660 --> 00:09:28,110 ‫That means, look, we are directly selecting our cat. 149 00:09:28,450 --> 00:09:31,720 ‫But when we select the class, it increased to zero one zero. 150 00:09:32,110 --> 00:09:34,720 ‫That means OK, we have some more focus. 151 00:09:34,720 --> 00:09:36,250 ‫We are preparing things. 152 00:09:36,640 --> 00:09:41,320 ‫But if I go to I.T., it is one 00 that is at the highest level. 153 00:09:41,890 --> 00:09:45,820 ‫That means I'm pretty sure I have a proper unique ID. 154 00:09:46,000 --> 00:09:47,230 ‫So this is lowest. 155 00:09:47,320 --> 00:09:48,250 ‫Zero zero one. 156 00:09:48,610 --> 00:09:50,760 ‫This is greater than that zero one zero. 157 00:09:50,770 --> 00:09:53,050 ‫And then this is a higher than that. 158 00:09:53,080 --> 00:09:54,340 ‫That is one zero zero. 159 00:09:54,910 --> 00:09:56,560 ‫OK, we are getting into depth. 160 00:09:56,590 --> 00:09:58,360 ‫I hope you got the basic idea. 161 00:09:58,870 --> 00:10:05,620 ‫For now, I strongly recommend to create a page that means create a webpage, try out, befriend these 162 00:10:05,620 --> 00:10:11,710 ‫dogs and do some basics, something similar to what I do know friends and stuff where you are talking 163 00:10:11,710 --> 00:10:13,120 ‫about more properties soon. 164 00:10:13,630 --> 00:10:16,990 ‫I hope you got the idea of the basic thing now, head. 165 00:10:16,990 --> 00:10:18,790 ‫I want to discuss about a few other things. 166 00:10:19,240 --> 00:10:24,280 ‫The first thing is that by default, if DML have its own property. 167 00:10:24,670 --> 00:10:30,140 ‫So if you see by default, we have black and white because that's the basic property of HDMI. 168 00:10:30,160 --> 00:10:32,920 ‫By default, you can see background as white. 169 00:10:33,070 --> 00:10:33,500 ‫Why? 170 00:10:33,880 --> 00:10:38,710 ‫Because as Yemen has its own property, its own property and its value. 171 00:10:39,310 --> 00:10:41,440 ‫By default, the phone size is 16. 172 00:10:41,440 --> 00:10:43,060 ‫So if I just said this one. 173 00:10:43,360 --> 00:10:51,520 ‫So this is 16, the default font size and there are few other properties that it still carry by default. 174 00:10:51,790 --> 00:10:58,270 ‫So even the font that we are using the phone family, the actual font that we are utilizing, it's by 175 00:10:58,270 --> 00:11:04,900 ‫default checked by HDMI so we can override everything and customize according to our requirement that 176 00:11:04,900 --> 00:11:05,680 ‫Steve Austin. 177 00:11:06,160 --> 00:11:07,870 ‫The second thing I want to discuss is. 178 00:11:11,380 --> 00:11:15,580 ‫If you jump on to any Web page, if you just click on Inspector. 179 00:11:16,690 --> 00:11:22,960 ‫You will realize that you can watch CSI different page directly right there, going to that particular 180 00:11:22,960 --> 00:11:29,680 ‫element just to do that and get all these property, we are going to do a lot of things, but this is 181 00:11:29,680 --> 00:11:31,870 ‫the basic stuff that we are going to utilize. 182 00:11:32,300 --> 00:11:38,860 ‫So if I just jump, right click here, click on Inspect, and I will get multiple properties about this 183 00:11:38,860 --> 00:11:39,340 ‫input. 184 00:11:39,580 --> 00:11:41,260 ‫So had I have selected the input? 185 00:11:41,710 --> 00:11:42,490 ‫Scroll down. 186 00:11:42,490 --> 00:11:44,890 ‫You can see all these information. 187 00:11:47,720 --> 00:11:50,070 ‫Here, I'm just updating you about this. 188 00:11:50,090 --> 00:11:55,520 ‫This will help you to give basic idea that how he says it is working with a different website. 189 00:11:55,940 --> 00:11:57,380 ‫You don't need to copy this. 190 00:11:57,380 --> 00:11:59,420 ‫You don't need to visualize anything here. 191 00:11:59,720 --> 00:12:03,020 ‫It's just the basic idea that how they are writing CSS. 192 00:12:03,830 --> 00:12:05,180 ‫That's all for this lecture. 193 00:12:05,180 --> 00:12:06,470 ‫I hope this was helpful. 194 00:12:06,830 --> 00:12:07,800 ‫Thank you for calling. 195 00:12:07,820 --> 00:12:13,050 ‫And in the next lecture, let us understand how do our courses in different manners? 196 00:12:13,220 --> 00:12:19,160 ‫Currently, we use this external option, which is linking our style sheet, and that's the correct 197 00:12:19,160 --> 00:12:19,400 ‫one. 198 00:12:19,700 --> 00:12:23,090 ‫We have created a new pile and everything is inside the stylesheet. 199 00:12:23,600 --> 00:12:28,070 ‫What we can do with more different methods and we'll be discussing about in the next one.