Hello, in this CSS Crash Course video, we're going to look at the color properties, or more specifically how to specify a color value because there's different color properties. You could do text, color, background, color, border color, etc. But what we're interested in is the value that you assign, because what we did in the index dot CSS for we signed it black or white, but you can go beyond that there are different methods for using more specific tones of colors. So first of all, let's create a div. Closing big, and I'm just gonna put text in there of method one. I'm gonna put a style in course, and I'm gonna leave that blank because we'll be coding there up in a moment.

And what I'm going to do is do a bright line, copy and paste this are the six instances of it five, sorry, because we Copy and paste it. Make sure it's all good. Yeah, so good. Now we're done. So let's just tidy this up. So by renaming it method two, three, or five, first method we're going to show you is st in the method we've already used.

Don't bog yourself, or don't bother trying to think about the property that we're affecting, which is the background color. The reason I say that is because we'll be covering all that in a separate video. This is more about the value that you can assign to it. Thank you, Colin. We're going to put the name of the colossal red so this is very limited in terms of colors you can use. There's a lot there but still nowhere near as much as customizing the color.

If I were to go To refresh and see the background is now red. What the hell that? That's weird. Oh, this was Yeah, that was the integration simple. No, we do not want to be doing any integration in this video. So going above that ground dashboard.

So the next way of using color banding will show you the RGB which means red, green, and blue. So you set a red value, a green value and a blue value and you calculate What color should be. So for this, what you would do is have a value between zero and 255. So that's 256 different values for blue, red, green and blue 245 which is fully on 00. So for save that, refresh is now red. Nothing want to show you is if I were to put this half way, save it, refresh it as well.

Half the time color. And if I were to put something like 200 for the green, we've got this or a light greenish color. If I were to change it to 200. Save that, as you got anything with three yellowish color, that's how you would make this sort of yellow, almost orangey color. Song really does 200 200. The next method I'm going to show you for setting color values is the RGB method again, but instead of having values ranging between zero and 200 points, it is using percentages.

So zero to 100% 100% 00. Save that and refresh. Sorry about a percentage here as well. Save that refresh on that. might have been saving it. I am.

So what is not like in Okay, before I do that one thing I forgot to mention that you don't need to comment here this action kicks in. Vote save that leave it go back and hit refresh. Sorry, my bad you need the commerce and that's what the issue is. I think it's one of one way or the other I couldn't quite remember. So let's go back refresh there we go red color now and you can send a chain there so you achieve the same result and I recommend doing that just experiment with it. Next method I'm going to show you is the hexadecimal method.

If you don't know how to use a what a hexadecimal czar or recommend googling it or asking on our education platform sonar learn co UK very interesting stuff and very useful to me. No. So to start a hexadecimal do hash, then there are six different values on ff 000. And the first to refer to red next to refer to greens and the last to refer to blue. And I think you've guessed it, this will be all red with with hexadecimal, ranging between zero and F. There are 16 values in total, in hexadecimal. So the final color value method I'm going to show you is the hexadecimal one, again, for the shorthand version.

So if you put f 00, this is the equivalent to this. So what it does, it gets each one of the free sections so for red, green, and blue, and you can think of it as doubling so if there was 123, it will be the equivalent of 11223344. Save that, refresh the final one and achieve the same result. My thinking why would you ever want to use This method over this short method simply because forward to change this to a six For example, this is now known now no longer achievable in this because dot F suggested to us and to zero to zero in reality we want f 60000 so that's where you would want to when you want even more control so if I save this and let's just see what the color looks like yeah, I didn't really do much so change this to zero so you'll be noticeable this will be half color.

Question is even that changing almost looks like it's not. What I'm going to do it changes to a change is a change, for saving just to see. Yeah, it is updating you just ever so slight. So I'm just going to go back and save that Go back one more time. So yeah, that is it for colors and CSS. If you have any questions, feel free to post them on my education platform.

So no learning Dakota UK. In a while there will be a resource with this video, which is a link to our source code and the link to the source code from every video in this series. And as usual, thanks for watching and I hope you have a great day.