WEBVTT 0 00:00.110 --> 00:08.300 Now we've already used some CSS properties in order to apply CSS to our different HTML elements, but in 1 00:08.300 --> 00:13.220 this section we're going to do a deep dive into some of the most important CSS properties that you'll 2 00:13.220 --> 00:14.690 see and use. 3 00:14.720 --> 00:20.300 And we're going to start with CSS, color properties. Some of the color properties you've already seen 4 00:20.300 --> 00:21.410 previously. 5 00:21.530 --> 00:28.640 I've shown you how you can set the background color of a particular HTML element by using the "background-color" 6 00:29.180 --> 00:30.800 property, 7 00:30.800 --> 00:36.920 and previously we've been setting it to basic colors like red or blue or green. 8 00:37.040 --> 00:45.080 And remember that the way that the CSS rules work is the first part is the property. 9 00:46.280 --> 00:52.850 And the part that comes after the colon is the value that you want to set that property to. 10 00:52.880 --> 00:59.630 So in this case, we're setting the background-color of the HTML element, which remember contains everything 11 00:59.630 --> 01:00.660 on our website, 12 01:00.660 --> 01:04.770 so the entire web page to a color of red. 13 01:04.770 --> 01:06.510 That's what that rule does. 14 01:06.690 --> 01:10.170 Now, there are different types of color properties; 15 01:10.170 --> 01:15.090 there's the background-color, but you can also simply use the "color" property, 16 01:15.090 --> 01:19.080 and what this does is it sets the text color. 17 01:19.080 --> 01:21.900 So always check the MDN Docs 18 01:21.930 --> 01:25.200 if you're not sure which property does what. 19 01:26.370 --> 01:32.460 Notice that in this case, we've got two colors, which we've named red and blue, 20 01:32.490 --> 01:35.640 well, how do we know that we can use these colors 21 01:35.640 --> 01:37.380 and what exactly are they? 22 01:37.500 --> 01:39.810 Well, they're called Named Colors, 23 01:39.810 --> 01:47.910 and there's a whole bunch of them out there with poetic names like cornflowerblue, or cadetblue, or 24 01:47.910 --> 01:51.390 dimgrey, or olivedrab, etcetera. 25 01:51.390 --> 01:56.340 And you can find all of them by, of course, going to the Developer Documentation. 26 01:56.430 --> 02:03.140 If you Google for MDN Docs named color, the first link should take you to this web page. 27 02:03.150 --> 02:08.580 Alternatively, you can use this URL as well, and the syntax is pretty simple 28 02:08.580 --> 02:16.080 you simply use the name of the color and if you scroll through this table you'll see all the different 29 02:16.080 --> 02:16.740 colors. 30 02:16.740 --> 02:20.880 And don't worry too much about the CSS Level 1 or Level 2 or Level 3, 31 02:20.910 --> 02:24.870 it just describes historically when each color was introduced. 32 02:24.870 --> 02:28.330 So these were introduced first because it's basically the rainbow. 33 02:28.330 --> 02:35.650 And then over time we got some more fun colors like cyan and darkkhaki and all of these different colors. 34 02:35.650 --> 02:42.490 So you can simply copy the name of the color and paste it into your code and you'll be able to see that 35 02:42.490 --> 02:44.380 rendered in your website. 36 02:44.530 --> 02:49.900 Of course, even though there's many colors available in the default CSS named colors, 37 02:49.900 --> 02:54.460 but you still sometimes might want to have a more unique color palette. 38 02:54.460 --> 02:56.410 So what do you do in that case? 39 02:56.410 --> 03:01.510 Well, one of my favorite color palettes is colorhunt.co. 40 03:01.900 --> 03:09.070 It's a free tool that's created by designers for designers and of course, for us as well. 41 03:09.250 --> 03:15.610 Here you've got professionally designed color palettes for colors stacked together that would look perfect 42 03:15.610 --> 03:16.840 on any website. 43 03:16.870 --> 03:22.450 You can imagine that if you select any of these random websites, maybe this could be the background 44 03:22.450 --> 03:23.500 color of the website. 45 03:23.500 --> 03:28.090 This could be an h1 color, this could be a subtitle or h2 color. 46 03:28.090 --> 03:33.310 You have accent tones, you have main tones, and you can use all of these colors in your website. 47 03:33.310 --> 03:38.110 But how do we use them if we don't have a name that's attached to it? 48 03:38.110 --> 03:40.960 Instead, we've got all these numbers and letters, 49 03:40.960 --> 03:42.730 what exactly are these? 50 03:42.760 --> 03:51.820 Well, these are "hex codes" and they are a way of representing a larger number code for that particular 51 03:51.820 --> 03:52.450 color. 52 03:52.450 --> 04:00.010 So, for example, in this case, this is a color purple which is formed of three fractions, red, 53 04:00.010 --> 04:01.030 green and blue. 54 04:01.090 --> 04:04.720 And these are colors out of 255. 55 04:04.720 --> 04:15.160 So if you imagine a fraction, 93 out of 255 red, 56 out of 255 green 145 out of 255 blue. 56 04:15.160 --> 04:21.160 And when you mix all three of these primary colors, you can get so many different types of shades. 57 04:21.160 --> 04:24.550 So in this case, we've got 93, 56, 145, 58 04:24.580 --> 04:37.300 so 93 out of 255, 56 green out of 255 and 145. 59 04:37.300 --> 04:44.860 So a little bit more blue and we end up with exactly the same shade as this purple you see right here. 60 04:45.370 --> 04:49.480 Converting that RGB into a hex code, 61 04:49.480 --> 04:52.600 so a different way of representing that number, 62 04:52.600 --> 04:55.210 we get this particular hex code. 63 04:55.210 --> 04:56.860 What does this mean for you? 64 04:56.860 --> 05:01.780 Well, when you're using something like Color Hunt and you want to apply these different colors to your 65 05:01.780 --> 05:08.080 website, you can simply copy the hex code and use it instead of the name. 66 05:08.080 --> 05:14.770 And even on the MDN Docs for the named colors, you can see their hex codes lined up next to the names, 67 05:14.770 --> 05:18.220 and in code it looks pretty much exactly the same. 68 05:18.220 --> 05:20.860 Instead of the name, you just put the hex code. 69 05:21.370 --> 05:23.650 So now it's time to try an exercise. 70 05:23.680 --> 05:30.730 Go ahead and download this zip file from this current lesson, extract it and open it inside VS Code. 71 05:30.910 --> 05:36.970 Once you're here, you should see it's a pretty simple website with just two elements inside the body, 72 05:37.210 --> 05:38.950 a h1 and a h2. 73 05:38.950 --> 05:44.740 And if we look at the preview, then you can see it's clearly a drab, black and white world. 74 05:44.860 --> 05:48.370 We're going to change all of that by adding in CSS colors. 75 05:48.370 --> 05:54.610 So you've got five steps that you need to complete here and you should follow them one by one, and by 76 05:54.610 --> 06:00.010 the end of all five steps, you should have a website that looks something like this with lots of different 77 06:00.010 --> 06:02.980 colors and different background colors as well. 78 06:03.160 --> 06:05.980 Pause the video now and give this challenge a go. 79 06:09.620 --> 06:10.040 All right. 80 06:10.040 --> 06:12.500 So let's walk through the solution together. 81 06:12.680 --> 06:20.330 We've got the background-color of the body, which is set to antiquewhite, which is this color right 82 06:20.330 --> 06:20.890 here. 83 06:20.900 --> 06:25.400 And we've got the text color of the h1 set to whitesmoke, 84 06:25.430 --> 06:29.430 but you can also set the background color of the h1. 85 06:29.450 --> 06:35.390 It's a property that's available on any of the elements and it simply takes the existing area of that 86 06:35.390 --> 06:37.700 element and colors the background. 87 06:37.910 --> 06:41.870 Now, that might have required a little bit of lateral thinking, but hopefully you got there in the 88 06:41.870 --> 06:42.440 end. 89 06:42.440 --> 06:49.910 And notice how in the h1 we've got all named colors and in the h2, I've asked you to use hex 90 06:49.910 --> 06:55.760 colors and this is just so that you have practice adding colors using the two different methods. 91 06:56.630 --> 06:58.280 Hopefully you got there in the end. 92 06:58.280 --> 07:05.090 Once you're ready, head over to the next lesson and let's learn more about formatting fonts using CSS.