NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,310 Hi guys, and welcome back. 2 00:00:01,310 --> 00:00:04,490 In this lecture, let's talk about how to use colors in CSS. 3 00:00:04,640 --> 00:00:07,580 We've learned about the different ways to represent color, like 4 00:00:07,580 --> 00:00:10,040 with named colors, RGB, and HSL. 5 00:00:10,309 --> 00:00:12,950 Now we're going to actually use them so that we can learn 6 00:00:12,950 --> 00:00:14,000 how to use them in practice. 7 00:00:14,050 --> 00:00:14,710 Let's get started. 8 00:00:15,556 --> 00:00:18,166 Here we've got our HTML document. 9 00:00:18,166 --> 00:00:19,826 I'm just gonna zoom in a little more in here. 10 00:00:19,810 --> 00:00:23,170 Because there's not much in here, we've just got the usual boilerplate. 11 00:00:23,220 --> 00:00:25,140 We've got the main element. 12 00:00:25,320 --> 00:00:28,230 Then we've got a paragraph and inside it, we've got a link. 13 00:00:28,353 --> 00:00:29,673 So this is one that looks like. 14 00:00:29,723 --> 00:00:32,183 We've also got to link our style sheet. 15 00:00:32,213 --> 00:00:34,823 So let me just do that real quick. 16 00:00:35,323 --> 00:00:38,773 And that is where are we going to be writing our CSS styles. 17 00:00:39,076 --> 00:00:41,566 First, let's talk about the color property. 18 00:00:41,926 --> 00:00:45,016 We've seen it already a few times and it's used to change 19 00:00:45,046 --> 00:00:47,746 the text color of any element. 20 00:00:48,210 --> 00:00:51,480 So we can get the main element in here and we can change the color 21 00:00:51,480 --> 00:00:55,313 property to let's say red, and then it sets the color to red. 22 00:00:55,656 --> 00:00:59,156 However, there's a few things that are also going on with the color 23 00:00:59,156 --> 00:01:00,386 property that we should talk about. 24 00:01:00,623 --> 00:01:03,293 The first one is you can see that the link didn't change color. 25 00:01:03,413 --> 00:01:07,043 That is due to inheritance, and we're going to learn more about why that is and 26 00:01:07,043 --> 00:01:09,323 how that works in a couple of videos time. 27 00:01:09,413 --> 00:01:14,333 So don't worry about that for now, but if you do change the links text color, you 28 00:01:14,333 --> 00:01:19,013 can overwrite that and you can see that the underline actually also changed color. 29 00:01:19,583 --> 00:01:22,723 You can change that separately if you want with text decoration 30 00:01:22,828 --> 00:01:26,008 color, and you can set it to aqua for example, and that is going to 31 00:01:26,008 --> 00:01:29,848 change the color of any decoration like strikethroughs or underlines. 32 00:01:30,128 --> 00:01:33,818 Setting the color property also sets the value of a keyword 33 00:01:33,818 --> 00:01:35,738 in CSS called currentcolor. 34 00:01:36,368 --> 00:01:40,328 And it acts like a variable and we can use it in place of a color value. 35 00:01:40,678 --> 00:01:46,608 For example, you can use it to set the border one px, solid, currentcolor 36 00:01:47,178 --> 00:01:49,128 to match the color of the text. 37 00:01:49,278 --> 00:01:51,408 So then we have a border which is red. 38 00:01:51,704 --> 00:01:55,244 This is useful, if you want it to be the same color and you don't want to 39 00:01:55,244 --> 00:01:58,514 repeat yourself with the red color, let's say, because then if you want to 40 00:01:58,514 --> 00:02:01,214 change this color red to something else, you have to change it in two places. 41 00:02:01,364 --> 00:02:05,024 If you're using currentcolor, then you don't have to change it in two places. 42 00:02:05,524 --> 00:02:08,794 Let's talk about background-color, background-color is new to us, 43 00:02:08,794 --> 00:02:09,814 but it's fairly straight forward. 44 00:02:09,824 --> 00:02:13,354 As you can imagine, it sets the background color for the elements that we specify. 45 00:02:13,354 --> 00:02:14,704 Let's start with an a element, actually. 46 00:02:14,894 --> 00:02:17,988 Ill set the background color to red when we've refreshed the page, 47 00:02:17,988 --> 00:02:20,958 you can see that the link is now blue as it would be normally, but 48 00:02:20,958 --> 00:02:22,398 it has a background color of red. 49 00:02:22,757 --> 00:02:26,057 One thing to be aware of when we're using background-color is the amount 50 00:02:26,057 --> 00:02:28,447 of space that the element takes up. 51 00:02:28,887 --> 00:02:33,337 For example, if we change this a to p we're no longer going to see red 52 00:02:33,367 --> 00:02:36,967 behind the text only, we're actually going to see red across the entire 53 00:02:36,967 --> 00:02:40,639 size of the element because paragraph elements are block level elements. 54 00:02:41,059 --> 00:02:43,819 Then they take up 100% of the width of the page. 55 00:02:44,059 --> 00:02:47,209 And that is why we see the background color spanning the entire page. 56 00:02:47,709 --> 00:02:52,059 Things like links, spans and em's have a default style of display 57 00:02:52,119 --> 00:02:55,869 inline, which means they only take up the space that their content needs. 58 00:02:55,959 --> 00:02:59,049 So the background color would only span the size of the content. 59 00:02:59,549 --> 00:03:03,419 Remember that there are different ways to represent color named colors 60 00:03:03,419 --> 00:03:08,369 as we've seen like red or orangered, or blue or whatever, come with CSS. 61 00:03:08,639 --> 00:03:11,969 And there's a lot of them so we can use them, but sometimes they 62 00:03:11,969 --> 00:03:14,069 are not exactly what we want. 63 00:03:14,249 --> 00:03:17,219 So often it's a good idea to create our own colors. 64 00:03:17,359 --> 00:03:20,509 For example, we can use RGB as we've learned previously. 65 00:03:21,274 --> 00:03:25,474 We can specify any RGB combination by using RGB and then inside brackets and 66 00:03:25,474 --> 00:03:29,434 comma separated values, put the three different channels, red, green, and blue. 67 00:03:29,884 --> 00:03:33,004 So for example, if we do one, two eight zero one two eight, that is 68 00:03:33,004 --> 00:03:37,234 mixing a bit of red and a bit of blue together to give us purple. 69 00:03:37,734 --> 00:03:39,474 We can specify any combination of values. 70 00:03:39,474 --> 00:03:42,744 We like as long as they fall within the accepted range of between 71 00:03:42,744 --> 00:03:45,414 zero and 255, both inclusive. 72 00:03:45,894 --> 00:03:49,554 If we said zero, zero, zero, then that sets up to black. 73 00:03:50,054 --> 00:03:53,864 We're going to also represent RGB values using hexadecimal. 74 00:03:54,137 --> 00:03:57,857 It's actually preferable because it uses fewer characters, that makes our 75 00:03:57,857 --> 00:04:02,357 style sheets smaller and overall the page loads, just that tiny bit faster. 76 00:04:02,657 --> 00:04:05,597 Also once you get accustomed to it, it's quite readable as well. 77 00:04:06,067 --> 00:04:08,327 For example ff, zero, zero, zero, zero. 78 00:04:08,491 --> 00:04:13,271 Which has all the red, none of the green and none of the blue is written like this. 79 00:04:13,271 --> 00:04:16,481 We can refresh the page and this sets the background color to red. 80 00:04:16,664 --> 00:04:18,374 The case of the characters doesn't matter. 81 00:04:18,374 --> 00:04:20,744 So you can use uppercase F if you prefer. 82 00:04:20,864 --> 00:04:23,444 Although my editor automatically changes them to lowercase, 83 00:04:23,594 --> 00:04:25,274 just so it's always lowercase. 84 00:04:25,524 --> 00:04:28,074 Remember that in order to specify hexadecimal colors, we 85 00:04:28,074 --> 00:04:29,604 need to use the hash symbol. 86 00:04:29,854 --> 00:04:33,804 Here, we've got three pairs of values where the letters are the same all pairs. 87 00:04:33,834 --> 00:04:35,934 So ff zero zero, zero, zero. 88 00:04:36,174 --> 00:04:39,654 So we can write single letters if we want instead. 89 00:04:39,984 --> 00:04:43,644 And then CSS is going to assume that we mean ff zero zero, zero, zero. 90 00:04:43,764 --> 00:04:45,234 So this means exactly the same thing. 91 00:04:45,534 --> 00:04:49,074 You can do the same with, for example, white, ffffff. 92 00:04:49,374 --> 00:04:51,534 You can write it as fff if you want. 93 00:04:52,034 --> 00:04:53,834 Let's talk about HSL as well. 94 00:04:53,864 --> 00:04:58,274 We can start on HSL color definition with a similar to the RGB color 95 00:04:58,274 --> 00:05:00,734 definition with HSL and then brackets. 96 00:05:00,974 --> 00:05:04,394 Inside the brackets, we need to provide a three comma separated values. 97 00:05:04,394 --> 00:05:08,054 The first one is the angle and the other two are percentages as we've learned. 98 00:05:08,554 --> 00:05:12,814 So for example, 300 degrees, 100%, and 25%. 99 00:05:13,504 --> 00:05:14,944 This gives us a purple. 100 00:05:15,004 --> 00:05:17,734 This is the degrees around the color wheel. 101 00:05:18,184 --> 00:05:19,684 This is the saturation. 102 00:05:19,924 --> 00:05:22,114 And this is the lightness of the element. 103 00:05:22,774 --> 00:05:25,834 If you want to learn more about what these mean, please visit the previous 104 00:05:25,834 --> 00:05:28,024 lecture where we talk about HSL in detail. 105 00:05:28,274 --> 00:05:31,514 Both RGB and HSL cell can be extended with an optional alpha 106 00:05:31,514 --> 00:05:33,254 channel that represents opacity. 107 00:05:33,464 --> 00:05:38,204 So for example, if we do HSLA 50%, that is going to make the purple 50% opaque. 108 00:05:38,414 --> 00:05:41,864 Although it just looks like a light purple here because the background is white. 109 00:05:42,104 --> 00:05:45,944 You would be able to see other elements behind this element, if there were any. 110 00:05:45,944 --> 00:05:51,034 Instead of using HSL or RGBA, you can also just use an opacity property 111 00:05:51,034 --> 00:05:55,474 here to set the opacity of the entire element that includes the text 112 00:05:55,564 --> 00:05:57,484 and anything else in the element. 113 00:05:57,984 --> 00:06:01,074 So if you want to make an element partially transparent, this is what 114 00:06:01,074 --> 00:06:05,814 you want and not the RGBA or HSLA of the color and background color. 115 00:06:06,951 --> 00:06:08,361 Alright, that's everything for this video. 116 00:06:08,361 --> 00:06:11,901 I just wanted to show you how to actually write these colors using CSS, 117 00:06:11,901 --> 00:06:15,981 because we're going to be doing that a lot throughout our CSS coding journey. 118 00:06:16,191 --> 00:06:18,471 So it was good to get accustomed to these different ways. 119 00:06:18,501 --> 00:06:22,491 For the most part, I use hexadecimal colors because I like to design my stuff 120 00:06:22,701 --> 00:06:27,501 in a separate design software that gives me all the hex and RGB colors and then I 121 00:06:27,501 --> 00:06:29,361 just copy them into my CSS style sheets. 122 00:06:29,601 --> 00:06:33,736 But if you prefer using HSL or even named colors if they suit your 123 00:06:33,736 --> 00:06:35,446 needs, then feel free to use them. 124 00:06:36,016 --> 00:06:38,626 Thanks for joining me in this video and I'll see you in the next one.