Change background on website

Hi and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott  and I'm a trainer here at Bring Your Own Laptop. Now in this tutorial we're gonna look at setting the  background color of your website. So the first thing we need to do is we need to figure out  how to add the background color, what tag to add it to,  and it's the body tag. Okay? Now the body tag we've briefly discussed through um,  the tutorials, but essentially what it is,  the body tag is everything  that the user sees on the website.

So if I look in code view, okay, I've got two main tags. I've got this body tag, you can see it starts here  and it goes all the way to the end of my website. Okay? So that's my body tag. That's everything that the user sees. Now, um, there's another tag, the head tag, okay?

And this is the stuff that the user doesn't see. So this has things like my title for my website  that appears in search engines. Okay? It has a link here to my CSS sheet. So this stuff doesn't get displayed to the user,  but it's very important for a website and it's in the head. We are gonna look at this body tag, okay?

And this is the tag that we color  to get the background color. So I'm gonna go back to design  view 'cause it's my preference. Now I'm going to click anywhere on my website. I'm gonna click the body tag here down in my breadcrumbs. And over here I'm gonna create a style for this body tag. It's the exact same principle as styling your H one tag  or your heading one tag  that we did in an earlier um, tutorial.

So clicking on body just helps us  preload this thing over here. So select body tag down here in breadcrumbs. Click the main CSS in the sources here. We're gonna ignore media at the moment, okay? In the selectors panel,  we're gonna hit this little plus button. Now it's gonna try and default to our body  and pick the paragraph tag as well.

So we're just gonna delete the P tag  and just have the body and hit enter. Okay, I had hit it twice now. Now I'm styling this tag. Okay, called Body. Now what I wanted to do is go to the background  icon, fourth one along and pick background color. Now what color do I want to pick?

I can type it in down here. Okay, if I know what the HEXA decal number is, I need  to leave the hash there and type it in. If you know the RGB color, okay, you can type it in here  or you can just mix around with the hue slider here  and go through and pick a color and pick up. You'll see a color as the background. If you've got a specific color you want to use, okay? And it's in, say it's from one of these images here.

You can go back into color and hit this little eyedropper. This eyedropper tool will allow you  to move around your document. And can you see as I move around in this top image here,  you'll notice that the color gets updated in the  hue, um, down here. So let's move it around. I'm gonna pick this color here, click enter,  And you'll notice it matches this top color. Now there's a slight problem  because I would like the background to be  that color, but I'd like the actual container div  to be white so it sits in the middle.

So what I'm gonna do is I'm gonna style the container diviv. So I'm gonna click inside anywhere inside my website. And you can see down in my breadcrumbs I've got the  container and that was everything. Um, so we could send to the website. We can also color this box though. So watch this.

So I've got container selected in my selectors. I'm gonna go down to background and I'm gonna pick white. I'm just gonna drag it from the top right hand corner there. So I'm gonna drag all the way up to the top and choose,  and I'll choose white, okay? Okay. And you'll notice that now I have a background.

It's very hard to see. Let's look at in preview mode. So I'm gonna use this little globe in the top right hand  corner and I'm gonna preview in Chrome. And you'll notice here I've got a background color of  that tealy blue. But my container here has the white background  where I can see my type. Alright, that's the end of this tutorial.

I'll see you in the next one.