WEBVTT 00:01.400 --> 00:02.000 Okay. 00:02.000 --> 00:05.690 In this video we will be talking about styling. 00:05.690 --> 00:08.300 We haven't touched styling yet. 00:08.330 --> 00:17.420 We kind of have CSS styles already here and this is what is available already in our React application. 00:17.420 --> 00:21.950 Whatever we've created and we don't really use them at all. 00:21.950 --> 00:31.310 And so I opened up CSS here and that's a file that is loaded with our app.js here. 00:31.310 --> 00:35.720 So we have App.js, I'll close it here to have more space. 00:35.720 --> 00:44.090 And basically we import that CSS files here and you can see that's a traditional HTML, CSS kind of 00:44.090 --> 00:49.280 styling because that's just a bunch of different classes and they apply. 00:49.310 --> 00:56.900 So whatever we import this here that will be available and it will style our website. 00:56.900 --> 00:59.840 So this is built in styles. 00:59.840 --> 01:07.740 We have up header up logo and so on, but we don't use them anymore because we don't use the built in 01:07.740 --> 01:08.220 class. 01:08.220 --> 01:12.480 We actually have a class name up here and that's it. 01:12.480 --> 01:15.690 So basically this is applied. 01:15.690 --> 01:20.220 The rest of it, we remove it so we can actually go and remove this. 01:22.150 --> 01:31.780 So we have this style that that's left over from whatever was created for us with Create React app. 01:31.780 --> 01:32.530 So we'll save it. 01:32.530 --> 01:36.460 Now you can see the only thing is text align center. 01:36.460 --> 01:39.070 So just to prove it, if I will do background. 01:40.770 --> 01:43.410 Color, let's say, like this. 01:44.760 --> 01:48.000 You can see my application is background color. 01:48.000 --> 01:54.900 And the reason for this, I have a class name here and that's up is the same as this one. 01:55.020 --> 02:03.630 I mentioned that before in React, the way to do a class, it's class name because class is restricted 02:03.630 --> 02:11.040 for word for JavaScript, so we can't really use the class name, so we need to use class name, but 02:11.040 --> 02:20.190 we could use something like an ID We, we had that already in in the normal HTML and it is available 02:20.190 --> 02:21.870 in our react. 02:21.870 --> 02:25.500 And also we have the style like that. 02:25.500 --> 02:27.070 So this is available. 02:27.090 --> 02:30.030 The only problem collision is with class. 02:30.030 --> 02:33.540 When you remember to use class name, everything will be easy. 02:33.540 --> 02:37.800 So basically what we have an option to style our application. 02:37.800 --> 02:46.330 So our first option will be to use normal CSS and you can group your CSS with your JavaScript. 02:46.330 --> 02:52.390 So you might have different CSS for each part, but it doesn't mean that it's not going to conflict 02:52.510 --> 02:57.130 because it will be just loaded and it will be resolved as any other CSS. 02:57.130 --> 03:03.340 So if you have styles that might impact other components, this this will happen. 03:03.340 --> 03:09.190 So you need to be careful with the selectors because they might interfere with with each other. 03:09.190 --> 03:13.540 It doesn't mean that once you load it here, it will be available only here. 03:14.380 --> 03:20.260 So that being said, you have an option to style it with a normal attributes and selectors, as you 03:20.260 --> 03:22.480 can see here, that's a class selector here. 03:22.600 --> 03:24.560 So that's one option. 03:24.580 --> 03:27.280 Another option will be to use. 03:28.950 --> 03:36.270 Uh, actually, I need to for a moment, uncomment this and save it so you can see it's working fine. 03:36.270 --> 03:39.270 So another option will be inline styling. 03:39.270 --> 03:44.250 So, for example, we have this header here or the main content here. 03:44.250 --> 03:52.020 So what I could do is I could do style and then equal, I can have some inline styling here. 03:52.020 --> 03:57.390 Let's say I will have P style like that, this P style. 03:57.390 --> 04:03.900 I need to create a constant P style and then I can create an object. 04:03.900 --> 04:10.830 So this time I will create a style for this content inside our kind of JavaScript. 04:10.830 --> 04:18.720 And we will use a similar to CSS properties like for example, if I want to have a font size. 04:21.130 --> 04:22.900 I need to do like that. 04:24.510 --> 04:25.940 Let's say to em. 04:29.250 --> 04:31.440 And that's need to be wrapped in the. 04:33.140 --> 04:34.220 I must like that. 04:34.850 --> 04:38.870 So I have this style applied here if I will save it. 04:38.870 --> 04:50.150 Now, you can see here this one is bigger and normally in this the same style in the normal CSS, I 04:50.150 --> 04:52.190 will have it like that. 04:52.190 --> 05:00.780 So remember, if you have dash in the CSS in this format you will have without dash but camelcase. 05:00.780 --> 05:04.310 So lower letter upper letter for each new word. 05:04.310 --> 05:07.670 So font size, for example, I can go do another one. 05:07.670 --> 05:10.520 So color this is one word only. 05:10.520 --> 05:12.020 So I didn't need to do that. 05:12.020 --> 05:16.580 The camelcase are seen here and then I can say for example red. 05:18.900 --> 05:20.460 And I can see this is red. 05:20.460 --> 05:23.980 So this is inline styling and we can do it this way. 05:24.000 --> 05:32.040 Also, remember to wrap everything here, like red normally is a keyword, but sometimes, like a units 05:32.040 --> 05:39.030 you have here in the CSS, you don't wrap it in the in the quotes, but this time you need to do it 05:39.030 --> 05:43.080 because you need to treat this as a string. 05:43.410 --> 05:43.830 Okay. 05:43.830 --> 05:46.650 So that's another way to do it. 05:46.920 --> 05:50.010 So what other options do we have? 05:50.040 --> 05:56.190 Very popular solution for React is to use a styled components. 05:57.020 --> 06:00.230 And we can go to the website here. 06:00.230 --> 06:07.820 So we are in the website styled components.com and this is styled components explanation how we can 06:07.820 --> 06:08.900 actually use it. 06:08.900 --> 06:16.010 So what we need to do is we need to install styled components in our application in order to use them. 06:16.010 --> 06:20.810 I'll just copy this and I will go here, I will close my server. 06:20.810 --> 06:26.600 So control C we'll close it and I can do ctrl V, so npm install save. 06:26.630 --> 06:33.110 We don't need to do it, but there is no harm so styled dash components that what you need to install 06:33.110 --> 06:34.520 and it will be added. 06:34.520 --> 06:39.500 And then what we can do is we can start using this. 06:39.500 --> 06:45.560 So we need to import this and let's come back to our page and I will show you how we can actually use 06:45.560 --> 06:47.630 it when that will be installed. 06:47.630 --> 06:57.420 So first thing first, we need to import the styles from this library that we have just installed and 06:57.440 --> 07:03.860 this styled it will give us an option to use some of the functionality from the styled component. 07:03.860 --> 07:11.030 So first let's do NPM, start and start our server again. 07:16.290 --> 07:20.910 And let's create here a new style component. 07:21.060 --> 07:30.870 So what we can do is we'll create another constant and let's call it bar graph like that, and then 07:30.870 --> 07:38.220 it will be equal to styled and then dot P like the paragraph. 07:38.220 --> 07:46.260 So basically what we are doing is we create a P tag and we will call it paragraph like this. 07:47.090 --> 07:50.690 Then here I will do a backtick twice. 07:51.080 --> 07:57.800 So that's a new way we can actually wrap our strings around and then inside we can have any styles we 07:57.800 --> 07:58.450 like. 07:58.460 --> 08:05.150 So let's say we'll have font size like this, but inside we don't need to do this. 08:05.180 --> 08:07.010 We can have a normal. 08:11.380 --> 08:12.880 Normal CSS. 08:13.330 --> 08:21.250 So this time we'll have let's change this to green, for example, and then do something bigger. 08:21.250 --> 08:22.120 So three M. 08:25.830 --> 08:27.060 I will have it like this. 08:27.060 --> 08:34.200 So basically what I did is I create a paragraph that will be our new element that we can use. 08:34.200 --> 08:39.930 So we have this styled paragraph here that we styled with an inline style. 08:39.930 --> 08:49.080 Let's create a new paragraph here and inside I can do new styled like that. 08:49.080 --> 08:50.220 So if I will save it. 08:50.220 --> 08:53.130 Now you can see here new styled is there. 08:53.130 --> 09:03.300 So what I'm doing with styled components is I create my own tags, my own elements, so I can do anything 09:03.300 --> 09:04.980 really what is here. 09:04.980 --> 09:09.030 And in this case I use the P and I name it paragraph. 09:09.030 --> 09:14.970 So this paragraph, I use it as a tag here and I can put inside whatever I like. 09:14.970 --> 09:22.950 So it is still the paragraph, but this paragraph takes this styles and whatever I have here, they 09:22.950 --> 09:23.670 will be used. 09:23.700 --> 09:26.560 The good thing about this is I can reuse it. 09:26.560 --> 09:29.650 So next time I would like to use the same style for paragraph. 09:29.650 --> 09:36.550 I can just use this paragraph or you can have that exported in one file and then you import into different 09:36.550 --> 09:40.510 components the same styles and this is the way to do it. 09:40.510 --> 09:48.190 So that's a few ways how we can actually control our styles and our CSS, CSS. 09:48.220 --> 09:55.150 The first one will be traditional CSS from the CSS file and then you import it in the file itself. 09:55.150 --> 09:59.380 The another one will be with inline styles like the style here. 09:59.800 --> 10:03.760 And another very popular is the styled components. 10:04.060 --> 10:08.530 This is extra library, but it's very handy to work with.