How to color the background of a webpage using the body html tag

Hi there, in this video we're going to go from this plain old white background to this toxic green color. Basically all I'm going to show you, how to color the background using your HTML Body Tag, and then I go off in a bit of a tangent to discuss RGB colors and Hexadecimal colors, and how to use this little Color Slider picker thing. It's all ahead of you in this next class.

So now we need to color this background part here, so this white, we can't color just the container, because the container's just sitting here in the middle. So we need another, I imagine if there was a tag, that wrapped around right around everything on a page. Look at that, Body Tag, it's already there. And this is the tag that you style, to change the complete background color. Now we could put the body down the end here, but it's very common to have it at the top. 

So body, remember, it doesn't need a period of a full stop in front of it. Just type 'body'. And we're going to add our background, I've used this loads of times now. Background color, there he is. Now we're going to pick one of these random colors for the moment. Coral. Let's check out what coral is. And it's, yeah, kind of like it, I kind of do. It's not working with these colors, but that is how to change your background color. We'll do background images later on in the course, but for the moment I want to focus a little bit on color, because using coral and red, and Indian red and ruby red, there's lots of different kind of naming. I don't know who's in charge of naming those colors, but hey, that's what they are. 

Often what we want to do is, just hover above it with your mouse, I'm not doing anything, I'm not clicking on it, I'm just hovering above it. It's kind of weird in VS code. Sometimes it turns on, and you're like, sometimes you just can't make it turn on even though you really want to. So just hover above it, see, what we turned on. And then down here we can do a couple of things. This, kind of far right slider is the Hue. So drag it to get it roughly in the zone. 

So say we want to change this to, I'm going to say bright green, just because. So we get it in the bright green range and we go- do we want a bit more yellow? Yellowy green or a bit more of the bluey green. That's got the bluey green. Then over here is the opacity. So how see-through it is. For a background color you can't really have see-throughness, or opacity, because there's nothing to see-through to, but later on that will be useful. And in here, it's wherever this dot ends up. So you click, hold it, and move it around. So if I go up here, it doesn't matter what the Hue is, I'm going to have white, which is RGB 255 across all of them. 

So what I want to do is get back into it by hovering above it, and going back into here, grabbing the green. Getting the kind of bluey green. and then clicking in here, I'm just kind of getting it to where I feel it should look nice, and that's what I want to do. I'm picking a random color for the moment. Now if you just click off in the background or move your mouse away, you'll notice the colors change from being RGB, sorry, from a name to this red, green, and blue mixture, and those, red mixed with green, mixed with blue, makes our kind of crazy green color. Let's save it and let's test it in the browser. That's the wrong place. There it is, it's my green. 

Another way to do colors is to use Hexadecimal colors. So I'm going to delete all of that. Now this is for the people that know already. So let's say that you do know what a Hexadecimal number is. It starts with hash, '#', and often people will use a three or six digit code. I'm just going to fake one. So it turns out, if I hit those keys randomly on my keyboard I get a green. So it's either three or six digits, mainly six digits. And where do we get these colors from? They're actually made up of red, green, and blue. So the first two digits red, second two digits green, last two digits blue, you don't need to know that, but let's say that you're working with brand guidelines. Say you're working for a corporate client, they might give you this Hexadecimal number or the RGB number, and you can type in whichever works for you. 

For me, I'm working from this mock-up here in XD. We'll look at XD later on, but this code-- this color in the background. I've clicked on my name up here, don't worry if you've never used XD. We'll talk about it later on in the course. I click on this, and you can see, gives me my Hexadecimal number, or I could go RGB, and I could type those in. All this different kinds of web, like creation-- like design products, like you could use Photoshop, Illustrator, XD, or Sketch, to design your website, but you build it in VS code, and then just figure out what the color codes you want to use. 

That's the code I want, I'm going to copy it and go into VS code. And that my friend is the kind of dark gray that I want. Save it. Browser, that's the dark gray. The first bit was easy, we talked about adding the Body Tag, and then I went on a little bit too long about colors. Felt like it was the time to do it, but maybe it wasn't, maybe it's for later. We'll cover it again as we go through if that felt a bit fast. I'm back for lunch, I've had a coffee. Racing through the stuff. Slow down, Dan, take breaths. And I will see you in the next video, where I've taken away.