WEBVTT 0 00:00.720 --> 00:08.260 So in the last lesson, we looked at how we can apply CSS styling through the use of our style sheet. 1 00:08.340 --> 00:15.420 Now in this lesson I want to show you a slightly less used but also quite a useful way of adding styling 2 00:16.140 --> 00:19.520 and that's through the use of inline styles. 3 00:19.530 --> 00:22.220 Now here's the starting Project. 4 00:22.260 --> 00:28.890 So go ahead and fork it. And once you've done that let's start adding some inline styles. 5 00:29.040 --> 00:37.290 So if this was in fact HTML, you know already that you can add styling inline just through the use 6 00:37.290 --> 00:38.700 of the style attribute. 7 00:38.970 --> 00:43.180 So I could say something like color is red. 8 00:43.300 --> 00:50.050 Now unfortunately though, this is not HTML and this is something that I keep reiterating because it 9 00:50.050 --> 00:56.650 looks so similar to HTML and it's doing so much behind the scenes for you converting this into Javascript 10 00:56.670 --> 01:01.530 that sometimes even I forget that I'm actually inside a JSX file. 11 01:01.630 --> 01:08.350 So when we write this code we immediately get an error telling us that the style property expects a 12 01:08.350 --> 01:13.670 mapping from style properties to values not a string. 13 01:13.720 --> 01:16.420 And it tells you how it wants you to write this instead. 14 01:17.050 --> 01:18.470 So what's going on here? 15 01:19.030 --> 01:26.270 Well in this case, we're actually providing a string as the value to the style attribute. 16 01:26.500 --> 01:28.870 And this would work fine if this was HTML. 17 01:29.230 --> 01:38.410 But in Javascript it wants this value for the style property as a Javascript object. 18 01:38.410 --> 01:42.010 Let's just remind ourselves. Javascript objects look like this: 19 01:42.010 --> 01:44.250 they exist in a set of curly braces 20 01:44.470 --> 01:47.650 and then they have key value pairs. 21 01:47.650 --> 01:54.300 So in this case, the key would be the word color and this would behave a bit like a variable, 22 01:54.310 --> 01:56.270 so it's not a string. 23 01:56.440 --> 02:00.890 Whereas the value, in terms of CSS anyways, is going to be a string. 24 02:00.910 --> 02:03.350 So in this case, it will be red. 25 02:03.550 --> 02:11.410 And each of these key value pairs in a Javascript object are separated by commas not semicolons as you 26 02:11.410 --> 02:12.880 would see in the style sheet. 27 02:13.540 --> 02:19.680 But in my case, I just want to add a single style which is to change the color to red. 28 02:19.780 --> 02:24.880 And so I'm just going to collapse it down and see it as a simple version. 29 02:24.940 --> 02:33.580 Now let's go ahead and delete this string and try to insert this Javascript object in as the value for 30 02:33.580 --> 02:35.740 this style property. 31 02:35.740 --> 02:43.780 Now remember though, whenever we want to inject some Javascript into an HTML element in JSX, we have 32 02:43.780 --> 02:46.360 to wrap it inside a set of curly braces 33 02:46.360 --> 02:47.380 right? 34 02:47.410 --> 02:55.720 So now that we've got our set of curly braces then we can cut our Javascript object and paste it inside. 35 02:57.010 --> 03:03.040 And our console finally stop screaming at us and accepts our code as valid. 36 03:03.880 --> 03:09.760 But this does end up looking very strange with two sets of curly braces. 37 03:09.880 --> 03:19.090 But this is all because the style property requires a value that is a Javascript object and that object 38 03:19.210 --> 03:22.770 in order for it to be interpreted correctly inside 39 03:22.790 --> 03:30.220 an HTML element, has to have a set of curly braces around it. Instead of a normal expression like 40 03:30.220 --> 03:32.320 say 2 + 3, 41 03:32.320 --> 03:38.050 in this case we're just replacing it with a Javascript object. 42 03:38.090 --> 03:41.960 Now you might ask, well why would we do this right? 43 03:42.050 --> 03:48.830 Because we've already learnt about class based styling and we know that the React documentation in 44 03:48.830 --> 03:56.300 fact recommends to use class based styling using the style sheet to change the appearance of your React 45 03:56.360 --> 03:57.200 elements. 46 03:57.200 --> 04:01.760 So why would we ever want to do this kind of inline styling? 47 04:01.760 --> 04:08.870 Well there are certain cases where this is pretty useful especially when you want styles for certain 48 04:08.870 --> 04:12.170 React elements to update on the fly. 49 04:12.680 --> 04:20.390 So while your app is up and running, if the user does something or the time changes or it's a different 50 04:20.390 --> 04:26.240 day or it's a different hour, you might want to trigger a change in your style 51 04:26.270 --> 04:26.920 right? 52 04:27.020 --> 04:31.040 And you can do that really easily using inline styles. 53 04:31.040 --> 04:32.360 Let me show you what I mean. 54 04:32.480 --> 04:37.340 I'm going to cut my object and I'm going to save it inside a constant. 55 04:37.490 --> 04:43.330 I'm going to call it custom style and set it to equal this object. 56 04:43.340 --> 04:45.950 Now let's go ahead and expand it out again. 57 04:45.950 --> 04:51.560 And while I'm here, I'm gonna add a couple more styles and I want to point out that when you're using 58 04:51.830 --> 04:59.110 CSS properties, remember that they are kebab cased, so lowercase lowercase separated by a hyphen. 59 04:59.540 --> 05:07.910 But in order to use these properties inside your Javascript object you have to convert those names to 60 05:07.970 --> 05:09.230 camel case. 61 05:09.230 --> 05:14.930 So for example, if we want to change the font size instead of writing font-size, we would write font 62 05:15.350 --> 05:22.310 and then it's a capital S and size. And then we can change the size to say 20 pixels. 63 05:22.310 --> 05:28.250 Remember that instead of semicolons which you might be used to when you're writing CSS, we're going to 64 05:28.250 --> 05:35.030 be using commas because we're inside a Javascript object. And instead of simply just writing out 20 pixels 65 05:35.060 --> 05:43.970 or red, the values for each of these key value pairs has to be a string and that includes cases where 66 05:43.970 --> 05:46.460 you have spaces as the value. 67 05:46.460 --> 05:49.360 So for example if I wanted to add a border 68 05:49.520 --> 05:54.310 normally I would write say 1 pixel solid black. 69 05:54.680 --> 06:03.430 Well in this case it's still exactly like this, but it has to be a string with each of these spaces preserved. 70 06:03.500 --> 06:13.400 Now that I've created my custom style constant I can now insert this object inside here as the style. 71 06:13.400 --> 06:18.890 So I've got my curly braces denoting that I'm about to write some Javascript and I'm going to insert 72 06:18.950 --> 06:21.830 my custom style object right there. 73 06:22.370 --> 06:29.270 And as soon as that gets compiled then you can see that we've got our h1 changing its font size, 74 06:29.570 --> 06:39.600 having a border and changing its color all because of this custom style. Now here's the interesting part. 75 06:39.780 --> 06:46.050 If at some point in our code something changes let's say the user did something or the day changed 76 06:46.050 --> 06:47.780 or the time changed became 77 06:47.870 --> 06:49.070 morning to night, 78 06:49.200 --> 06:54.330 something happens and we wanted to change the style of our h1. 79 06:54.330 --> 06:57.930 We don't have to touch any of our code in here. 80 06:58.050 --> 07:03.540 All we have to do is to just update the properties of our custom style object. 81 07:03.990 --> 07:11.830 So let's say that I decided to change its color to, instead of red, let's make it blue. And as soon as I hit 82 07:11.830 --> 07:17.730 save, you'll see that style gets immediately updated. 83 07:17.740 --> 07:21.820 So this means that our style can change on the go. 84 07:21.820 --> 07:27.890 And this is one of the biggest reasons why you would want to use inline styling. 85 07:28.380 --> 07:35.730 Now I recommend having a play around with these CSS properties. So have a look at the documentation for 86 07:35.790 --> 07:42.990 all of the CSS properties and tried to implement some of these other ones and convert them into a format 87 07:43.110 --> 07:50.160 that will get accepted by JSX so that you can see it rendered. And then have a play around with these 88 07:50.250 --> 07:57.720 objects, maybe put the object back in line with the HTML elements in the JSX. Get used to that 89 07:57.720 --> 07:59.910 double curly brace syntax. 90 08:00.210 --> 08:07.230 And once you're happy and you're comfortable with inline properties in JSX then head over to the 91 08:07.230 --> 08:12.420 next lesson well I've got a challenge for you where you're going to apply everything you've learned 92 08:12.450 --> 08:20.430 so far and especially in line and class based styles. As always, this file is gonna be saved for you to 93 08:20.460 --> 08:24.420 mess around with in the course resources if you want to. 94 08:24.630 --> 08:31.230 And the best way of overcoming confusion or just getting used to these concepts is to just clear the slate 95 08:31.290 --> 08:33.690 and try to achieve what we've done in the lesson 96 08:33.840 --> 08:36.570 all by yourself and then referring back to the final code 97 08:36.840 --> 08:38.220 if you need help. 98 08:38.460 --> 08:41.670 So have a play around with that and I'll see you on the next lesson.