1 00:00:01,080 --> 00:00:02,700 ‫So at this point, we know 2 00:00:02,700 --> 00:00:05,959 ‫that React components can also contain CSS styles. 3 00:00:05,959 --> 00:00:09,018 ‫And so let's now learn about some simple ways 4 00:00:09,018 --> 00:00:12,577 ‫of applying CSS to React applications. 5 00:00:12,577 --> 00:00:16,035 ‫So in React we have many different ways 6 00:00:16,035 --> 00:00:18,498 ‫of styling our components 7 00:00:18,498 --> 00:00:22,260 ‫and React doesn't really care about how we do that. 8 00:00:22,260 --> 00:00:24,460 ‫It doesn't have an opinion about styling. 9 00:00:24,460 --> 00:00:27,450 ‫And the reason for that is that just 10 00:00:27,450 --> 00:00:29,310 ‫as we learned in the very beginning 11 00:00:29,310 --> 00:00:32,575 ‫React is actually more of a library than a framework. 12 00:00:32,575 --> 00:00:35,959 ‫So it doesn't have a preferred way of how we should style 13 00:00:35,959 --> 00:00:40,197 ‫our components and in the end our applications, therefore 14 00:00:40,197 --> 00:00:43,440 ‫we can choose between many different options. 15 00:00:43,440 --> 00:00:45,482 ‫For example, we can use inline styling 16 00:00:45,482 --> 00:00:49,575 ‫we can use external CSS or even SAS files. 17 00:00:49,575 --> 00:00:54,575 ‫We can use CSS modules, styled components, or even Tailwind 18 00:00:54,630 --> 00:00:57,955 ‫CSS is an option to style our components. 19 00:00:57,955 --> 00:00:59,220 ‫Now in this lecture 20 00:00:59,220 --> 00:01:02,220 ‫we will not go into all of these of course 21 00:01:02,220 --> 00:01:04,513 ‫but we will talk about many of them later. 22 00:01:04,513 --> 00:01:07,173 ‫For now, I just want to use inline CSS 23 00:01:07,173 --> 00:01:10,512 ‫and then also later include an external CSS file. 24 00:01:10,512 --> 00:01:13,433 ‫So as you might know, in HTML 25 00:01:13,433 --> 00:01:17,583 ‫we can actually style elements using this style attribute. 26 00:01:18,660 --> 00:01:21,390 ‫So just like this. 27 00:01:21,390 --> 00:01:24,445 ‫And then in HTML we write those styles 28 00:01:24,445 --> 00:01:26,530 ‫in a string like this. 29 00:01:26,530 --> 00:01:30,164 ‫However, in JSX, that's not how it works. 30 00:01:30,164 --> 00:01:33,798 ‫So in JSX, we actually need to define inline styles 31 00:01:33,798 --> 00:01:36,124 ‫using a JavaScript object. 32 00:01:36,124 --> 00:01:39,067 ‫So if we need to write a JavaScript object 33 00:01:39,067 --> 00:01:41,687 ‫we first need to enter JavaScript mode. 34 00:01:41,687 --> 00:01:44,765 ‫So that's what the curly braces are for. 35 00:01:44,765 --> 00:01:47,869 ‫But then we need another set of curly braces. 36 00:01:47,869 --> 00:01:51,247 ‫And so that is again, to now create an object. 37 00:01:51,247 --> 00:01:55,590 ‫And so here we can now define some properties. 38 00:01:55,590 --> 00:01:59,730 ‫So let's say we want to style this text 39 00:01:59,730 --> 00:02:02,789 ‫so this H1 text with a red color. 40 00:02:02,789 --> 00:02:06,887 ‫And so now as I give it a save, there it is, 41 00:02:06,887 --> 00:02:08,373 ‫there it changed. 42 00:02:08,373 --> 00:02:11,450 ‫And so with this, you have the easiest way. 43 00:02:11,450 --> 00:02:16,450 ‫So the most straight forward way to style components in JSX. 44 00:02:17,046 --> 00:02:20,580 ‫So simply using the style attribute that is also 45 00:02:20,580 --> 00:02:22,351 ‫available in HTML. 46 00:02:22,351 --> 00:02:26,067 ‫Now in HTML, we basically never ever use this 47 00:02:26,067 --> 00:02:28,320 ‫and that's because of the separation 48 00:02:28,320 --> 00:02:31,710 ‫of concerns that we talked about in the previous lecture. 49 00:02:31,710 --> 00:02:33,840 ‫So where we always had the CSS 50 00:02:33,840 --> 00:02:37,950 ‫in a separate file and never mixed together with the markup. 51 00:02:37,950 --> 00:02:40,364 ‫But here in React, as we just discovered, 52 00:02:40,364 --> 00:02:43,503 ‫doing that is completely fine and natural. 53 00:02:44,609 --> 00:02:46,263 ‫Let's try another one. 54 00:02:47,650 --> 00:02:51,569 ‫So now font size, which in CSS you would write 55 00:02:51,569 --> 00:02:54,090 ‫like this, right? 56 00:02:54,090 --> 00:02:57,450 ‫So font-size, but in JavaScript 57 00:02:57,450 --> 00:02:59,610 ‫that's not a valid property name. 58 00:02:59,610 --> 00:03:02,150 ‫And therefore all the CSS property names have 59 00:03:02,150 --> 00:03:06,969 ‫been converted basically in JSX to this camel case notation. 60 00:03:06,969 --> 00:03:10,370 ‫So you need to write font size like this. 61 00:03:10,370 --> 00:03:13,029 ‫Let's say 32 pixels. 62 00:03:13,029 --> 00:03:15,746 ‫And so since we're writing an object 63 00:03:15,746 --> 00:03:18,783 ‫then also this value always needs to be a string. 64 00:03:20,283 --> 00:03:23,040 ‫Now, well that didn't change anything. 65 00:03:23,040 --> 00:03:25,380 ‫Maybe that's already the size. 66 00:03:25,380 --> 00:03:27,483 ‫Let's see what happens with 48. 67 00:03:28,680 --> 00:03:30,753 ‫Yeah, so now it's bigger. 68 00:03:31,650 --> 00:03:35,880 ‫And let's try another one. Text transform. 69 00:03:35,880 --> 00:03:38,880 ‫And you see that as always vs code already 70 00:03:38,880 --> 00:03:40,803 ‫shows you here the available options. 71 00:03:42,284 --> 00:03:46,260 ‫So make sure to always write these property values. 72 00:03:46,260 --> 00:03:49,380 ‫Then basically here S strings, because again, 73 00:03:49,380 --> 00:03:52,440 ‫this is in the end just a JavaScript object 74 00:03:52,440 --> 00:03:55,230 ‫and you could even extract this out here. 75 00:03:55,230 --> 00:03:59,875 ‫So just cutting this, let's create a variable here. 76 00:03:59,875 --> 00:04:04,875 ‫Const style, and it could be any variable name of course. 77 00:04:07,095 --> 00:04:09,570 ‫Then let's place that here. 78 00:04:09,570 --> 00:04:12,000 ‫And it all still looks the same. 79 00:04:12,000 --> 00:04:14,280 ‫Great. So this is the easiest way 80 00:04:14,280 --> 00:04:17,820 ‫of adding some styling to individual components. 81 00:04:17,820 --> 00:04:20,912 ‫However, when the application gets just a little bit bigger 82 00:04:20,912 --> 00:04:22,636 ‫it can get out of hand 83 00:04:22,636 --> 00:04:26,271 ‫and can be a lot of work to write our styles like this. 84 00:04:26,271 --> 00:04:28,200 ‫So like creating an object 85 00:04:28,200 --> 00:04:31,059 ‫for each of these components, it's perfectly doable 86 00:04:31,059 --> 00:04:34,854 ‫but you don't see many people doing that in the real world. 87 00:04:34,854 --> 00:04:37,770 ‫Now one thing that we can do is to actually 88 00:04:37,770 --> 00:04:40,650 ‫include an external CSS files just 89 00:04:40,650 --> 00:04:43,890 ‫like we have been doing all the time in our applications. 90 00:04:43,890 --> 00:04:46,581 ‫And so that is the easiest way I would say to 91 00:04:46,581 --> 00:04:50,190 ‫style React applications, which is basically the same 92 00:04:50,190 --> 00:04:52,800 ‫as styling any other webpage. 93 00:04:52,800 --> 00:04:55,997 ‫Now in that case we're not really mixing DCSS concern 94 00:04:55,997 --> 00:04:58,847 ‫with the JavaScript and HTML concerns 95 00:04:58,847 --> 00:05:02,160 ‫in the way that we learned in the last lecture 96 00:05:02,160 --> 00:05:04,590 ‫but that's of course not a problem. 97 00:05:04,590 --> 00:05:07,320 ‫And also we will learn how to do that a little bit later 98 00:05:07,320 --> 00:05:10,817 ‫again, using something called styled components. 99 00:05:10,817 --> 00:05:15,659 ‫But for now, let's take a look at the CSS file 100 00:05:15,659 --> 00:05:19,281 ‫that we included here in the very beginning of this lecture. 101 00:05:19,281 --> 00:05:21,900 ‫And so this is, well 102 00:05:21,900 --> 00:05:26,215 ‫a very pretty standard CSS file with some classes here. 103 00:05:26,215 --> 00:05:29,010 ‫And so now we need to add these class names 104 00:05:29,010 --> 00:05:33,063 ‫to the JSX elements so that these classes then get applied. 105 00:05:34,162 --> 00:05:38,250 ‫So let's go back and before we do any of that, 106 00:05:38,250 --> 00:05:39,953 ‫so before we add the classes 107 00:05:39,953 --> 00:05:43,590 ‫we need to first import this CSS file. 108 00:05:43,590 --> 00:05:46,380 ‫So right now our application has no way 109 00:05:46,380 --> 00:05:50,152 ‫of knowing that the CSS file exists in the project. 110 00:05:50,152 --> 00:05:55,152 ‫So what we need to do here is to simply import that file. 111 00:05:55,320 --> 00:05:56,610 ‫And so once again 112 00:05:56,610 --> 00:05:59,370 ‫it is actually web pack that will take care 113 00:05:59,370 --> 00:06:01,994 ‫of then taking the styles out 114 00:06:01,994 --> 00:06:05,293 ‫of the CSS file and injecting them into our application. 115 00:06:05,293 --> 00:06:09,453 ‫So index dot CSS. 116 00:06:09,453 --> 00:06:12,030 ‫All right. 117 00:06:12,030 --> 00:06:15,180 ‫And you see already things changed here. 118 00:06:15,180 --> 00:06:17,133 ‫So the background color is different 119 00:06:17,133 --> 00:06:19,912 ‫the font family has changed. 120 00:06:19,912 --> 00:06:23,100 ‫Yeah, for now, think that's all. 121 00:06:23,100 --> 00:06:26,190 ‫And we also get this nice yellow border 122 00:06:26,190 --> 00:06:28,140 ‫at the bottom of the page. 123 00:06:28,140 --> 00:06:30,189 ‫So you see that immediately web pack 124 00:06:30,189 --> 00:06:34,677 ‫included these styles now in our application now, okay, 125 00:06:36,180 --> 00:06:38,223 ‫but now let's add the classes. 126 00:06:39,585 --> 00:06:42,600 ‫So you see that we have one container 127 00:06:42,600 --> 00:06:47,600 ‫we have a header, we have menu, and we probably have footer. 128 00:06:50,024 --> 00:06:53,163 ‫Yeah, so just very straightforward. 129 00:06:55,260 --> 00:06:58,320 ‫So here, let's add the class of container 130 00:06:58,320 --> 00:07:00,840 ‫and let me first do it in the wrong way. 131 00:07:00,840 --> 00:07:04,180 ‫So I will just write class as we would do in HTML 132 00:07:05,673 --> 00:07:08,343 ‫but then React will actually warn us. 133 00:07:09,900 --> 00:07:13,590 ‫So you see here, Invalid DOM property class 134 00:07:13,590 --> 00:07:15,330 ‫did you mean class name? 135 00:07:15,330 --> 00:07:19,230 ‫And so this is one of the important rules of JSX. 136 00:07:19,230 --> 00:07:24,230 ‫So in JSX we cannot use class, but instead class name. 137 00:07:24,970 --> 00:07:26,310 ‫Okay? 138 00:07:26,310 --> 00:07:29,160 ‫So this is a common beginner mistake, but now 139 00:07:29,160 --> 00:07:32,511 ‫you have been warned it still does work here somehow 140 00:07:32,511 --> 00:07:37,407 ‫but we are really not supposed to use class in JSX. 141 00:07:37,407 --> 00:07:40,500 ‫Now that's probably because class is already 142 00:07:40,500 --> 00:07:43,710 ‫a reserved keywords in JavaScript. 143 00:07:43,710 --> 00:07:46,263 ‫Okay, but let's keep going here. 144 00:07:47,100 --> 00:07:50,787 ‫So again, let's add last name here of header. 145 00:07:54,554 --> 00:07:58,380 ‫Alright? And now this didn't really change a lot 146 00:07:58,380 --> 00:08:01,860 ‫and that's because we still have this style here applied. 147 00:08:01,860 --> 00:08:04,140 ‫So we probably don't want that. 148 00:08:04,140 --> 00:08:05,550 ‫And so just to keep this here 149 00:08:05,550 --> 00:08:08,760 ‫I will duplicate this one, comment it out 150 00:08:08,760 --> 00:08:11,426 ‫and then I will just make this an empty object. 151 00:08:11,426 --> 00:08:14,588 ‫Well, and that didn't really change a lot 152 00:08:14,588 --> 00:08:16,910 ‫and I know why that is. 153 00:08:16,910 --> 00:08:20,910 ‫It is because here we are actually supposed to 154 00:08:20,910 --> 00:08:23,433 ‫have a header element first. 155 00:08:25,523 --> 00:08:30,093 ‫Alright? And so that class should go there. 156 00:08:31,567 --> 00:08:35,971 ‫So this is a little bit just of semantic HTML right here 157 00:08:35,971 --> 00:08:40,290 ‫or let's say a semantic markup where the header 158 00:08:40,290 --> 00:08:42,660 ‫element is a bit better suited here 159 00:08:42,660 --> 00:08:45,070 ‫than simply having the H-1. 160 00:08:45,070 --> 00:08:46,933 ‫And here we have some problem. 161 00:08:46,933 --> 00:08:51,933 ‫Let's maybe change something here very quickly. 162 00:08:54,112 --> 00:08:58,470 ‫So here we have this 12 rim of width. 163 00:08:58,470 --> 00:08:59,913 ‫Let's change that to four. 164 00:09:01,920 --> 00:09:05,370 ‫So that's a bit better, even though it's not perfect yet 165 00:09:05,370 --> 00:09:10,130 ‫because of course this page is very narrow, but nevermind, 166 00:09:10,130 --> 00:09:12,903 ‫we will fix that in a moment. 167 00:09:14,070 --> 00:09:17,970 ‫Next up here, let's add the class of menu. 168 00:09:17,970 --> 00:09:21,660 ‫And again, that's class name. 169 00:09:21,660 --> 00:09:24,420 ‫And then just a simple string. 170 00:09:24,420 --> 00:09:25,470 ‫So menu. 171 00:09:25,470 --> 00:09:28,680 ‫And here, since we were talking about semantic markup 172 00:09:28,680 --> 00:09:33,414 ‫let's actually use the main tag, so the main HTML element 173 00:09:33,414 --> 00:09:38,414 ‫and then of course we need to close it correctly as well. 174 00:09:38,911 --> 00:09:41,100 ‫Ah, beautiful. 175 00:09:41,100 --> 00:09:41,933 ‫So you see that. 176 00:09:41,933 --> 00:09:46,083 ‫Now we get this nice styling here on the menu. 177 00:09:48,071 --> 00:09:53,071 ‫Okay, next up we have this class name here 178 00:09:54,990 --> 00:09:57,363 ‫which will just be footer. 179 00:09:59,640 --> 00:10:04,560 ‫All right, so let's see what we get here 180 00:10:04,560 --> 00:10:08,340 ‫we have this weird styling applied to these titles 181 00:10:08,340 --> 00:10:10,908 ‫which is not supposed to be happening. 182 00:10:10,908 --> 00:10:15,543 ‫And so let's just make them H3 not H2. 183 00:10:18,570 --> 00:10:21,063 ‫Yep. And so here we have the footer. 184 00:10:22,170 --> 00:10:26,790 ‫Nice. So with this, we actually have some styling applied 185 00:10:26,790 --> 00:10:28,500 ‫to our application right now. 186 00:10:28,500 --> 00:10:31,800 ‫And as I mentioned, we are getting these styles now 187 00:10:31,800 --> 00:10:35,207 ‫from this external CSS style sheet, which remember we 188 00:10:35,207 --> 00:10:38,970 ‫simply imported here using this import syntax 189 00:10:38,970 --> 00:10:41,670 ‫which will make web pack import the styles 190 00:10:41,670 --> 00:10:43,608 ‫into our application. 191 00:10:43,608 --> 00:10:47,869 ‫Then here, remember that we used class name and not class 192 00:10:47,869 --> 00:10:52,560 ‫because class is a reserved keyword in JavaScript already. 193 00:10:52,560 --> 00:10:56,430 ‫And by the way, there are a few more JSX rules like this 194 00:10:56,430 --> 00:10:59,700 ‫which we will talk about a little bit later in this section. 195 00:10:59,700 --> 00:11:03,113 ‫For now, just notice that the styles that we included here 196 00:11:03,113 --> 00:11:06,360 ‫are global styles, so they're not scoped 197 00:11:06,360 --> 00:11:10,212 ‫to each particular component, and that's very easy to show. 198 00:11:10,212 --> 00:11:15,212 ‫For example, we could add the header class also here. 199 00:11:16,934 --> 00:11:20,730 ‫And while that looks kind of the same 200 00:11:20,730 --> 00:11:22,860 ‫let's try something else. 201 00:11:22,860 --> 00:11:26,553 ‫Let's add maybe the footer class also to the header. 202 00:11:27,480 --> 00:11:31,200 ‫Yeah. And again, it doesn't change a lot, but if 203 00:11:31,200 --> 00:11:36,200 ‫we inspect the element here, yeah, so right here, then 204 00:11:41,340 --> 00:11:43,620 ‫of course both of these classes here. 205 00:11:43,620 --> 00:11:47,265 ‫So all of these styles will be applied to this same element 206 00:11:47,265 --> 00:11:50,580 ‫and in the end to the same component. 207 00:11:50,580 --> 00:11:54,090 ‫And so again, each component does not really contain 208 00:11:54,090 --> 00:11:57,583 ‫its own styles but simply uses the global styles 209 00:11:57,583 --> 00:12:01,140 ‫that are in index.CSS. 210 00:12:01,140 --> 00:12:03,630 ‫And this works fine for small apps, 211 00:12:03,630 --> 00:12:06,504 ‫but we will also use something called styled components 212 00:12:06,504 --> 00:12:08,760 ‫later in another project. 213 00:12:08,760 --> 00:12:12,250 ‫And so then we will have CSS that really only belongs 214 00:12:12,250 --> 00:12:14,463 ‫to one single component.