1 00:00:01,550 --> 00:00:02,750 Hello again, everyone. 2 00:00:03,590 --> 00:00:08,120 Now, the last person we talked about templates, the importance of choosing. 3 00:00:09,380 --> 00:00:11,930 However, we still do have any style changes. 4 00:00:12,410 --> 00:00:17,570 So in case anyone is disappointed about that in this lesson, we're going to talk about how to change 5 00:00:17,570 --> 00:00:18,680 the style of our code. 6 00:00:20,330 --> 00:00:29,150 It's now in our component, that's fine, we'll see the style your property after the template section. 7 00:00:30,830 --> 00:00:36,950 Now, this points to the case file of our component, so it seems that we will make this deal changes 8 00:00:36,950 --> 00:00:37,850 through this file. 9 00:00:39,260 --> 00:00:42,950 So now we got to first remember what our page looks like in the browser. 10 00:00:42,980 --> 00:00:46,070 Yeah, OK, so it's pretty plain and colorless. 11 00:00:47,290 --> 00:00:51,290 So let's have a slightly nicer style to our page. 12 00:00:51,610 --> 00:00:58,750 Now, you do remember that we included bootstrap in the project in the very first part so we can already 13 00:00:58,750 --> 00:01:00,870 use the bootstrap features. 14 00:01:01,090 --> 00:01:04,260 So that means it's time to include some success in the project. 15 00:01:05,770 --> 00:01:13,270 It's not just open up the HTML page and decide what I want to change the color of what I want to keep. 16 00:01:14,400 --> 00:01:17,370 OK, so for this, then I'll open this ISIS file. 17 00:01:19,050 --> 00:01:21,960 And of course, I'll start writing my success code. 18 00:01:30,020 --> 00:01:36,950 I'd say that first I want this text to be read and I'll say the changes and text turns red. 19 00:01:39,100 --> 00:01:42,520 Now, of course, what we're doing here is very simple. 20 00:01:43,440 --> 00:01:48,910 But we're going to build some more complex structures as our lessons progress, right? 21 00:01:49,170 --> 00:01:50,250 You have to start simple. 22 00:01:51,650 --> 00:01:58,880 Now, I want to make an important point for you, we need to know the CCWs properties for each component. 23 00:02:00,330 --> 00:02:02,090 Should be made in itself. 24 00:02:03,050 --> 00:02:09,710 So we define a style property for the app component here, if we're going to define a style for the 25 00:02:09,710 --> 00:02:15,290 products component, we must make it in its own case file in this folder and the same for the product 26 00:02:15,290 --> 00:02:15,770 component. 27 00:02:17,170 --> 00:02:24,070 Another thing I'd like to mention here is while we're talking about templates, wow, OK, so we talked 28 00:02:24,070 --> 00:02:29,050 about Templar's and Laszlo's, but we mentioned two different methods in line template and the external 29 00:02:29,050 --> 00:02:29,560 file. 30 00:02:30,670 --> 00:02:35,440 So likewise, we can use an inline style or an external file to change style. 31 00:02:36,750 --> 00:02:38,460 So let's examine this. 32 00:02:39,630 --> 00:02:45,480 Yeah, on this file, so when you look at it now, we can see that style. 33 00:02:45,480 --> 00:02:55,350 Yours is an array, but template, your URL is not because we can add more than one style file here. 34 00:02:57,560 --> 00:03:00,920 So that's why it's defined as Nuray. 35 00:03:02,210 --> 00:03:03,660 OK, I just wanted to point that out. 36 00:03:04,520 --> 00:03:05,350 So let's continue. 37 00:03:07,420 --> 00:03:11,390 Now, here, we're going to use the Stiles property, not style you are. 38 00:03:13,260 --> 00:03:18,330 So just like in template, I'll write the property that we want to change. 39 00:03:19,900 --> 00:03:21,010 Between back tactics. 40 00:03:22,570 --> 00:03:27,820 And when I say the changes, you can see this line changed color. 41 00:03:30,620 --> 00:03:35,300 All right, so that's how you change dial in a couple of different ways, of course, it is important 42 00:03:35,300 --> 00:03:39,160 to know here that this is an array, an array, an array. 43 00:03:39,200 --> 00:03:40,160 Hey, it's an array. 44 00:03:42,020 --> 00:03:47,510 Also, we have to use one template while creating our component, but not for style. 45 00:03:49,640 --> 00:03:56,690 What else we can use multiple different files, so on these two different methods, the choice is up 46 00:03:56,690 --> 00:03:57,050 to you. 47 00:03:58,390 --> 00:04:05,650 But I also want to bring your attention to how much code we write actually matters because very different 48 00:04:05,650 --> 00:04:12,230 code writing on the file is going to make it a little too difficult to control and then adding and removing 49 00:04:12,230 --> 00:04:16,360 new features who can be, well, brain numbing. 50 00:04:17,890 --> 00:04:19,090 So just pay attention. 51 00:04:19,240 --> 00:04:24,610 All right, so my friends, we've made a few simple examples for now and we certainly learned about 52 00:04:24,610 --> 00:04:26,260 working with templates and styles. 53 00:04:26,860 --> 00:04:30,980 So, again, I say that's enough for now and I'll see you in the next lesson. 54 00:04:31,860 --> 00:04:32,620 Goodbye for now.