Adding a background using CSS

- [Instructor] Now, when it comes to adding style to your content, we're going to be using CSS, and CSS is fantastic. It allows us to separate the content from the styles. So, here's my HTML, and I want to style it with CSS, starting out with just changing the background color, maybe trying an image back there. So, what I want to do is I actually want to go into the CSS Designer panel right over here, so you can see there's nothing in here. But it does say, Add a new CSS source. Sounds like a great idea.

Clicking right there, Create a New CSS File, that's what I want to do. I can attach an existing one or define one directly in the page, but if I'm making a new CSS file, I can link all the pages to that file. So, selecting that, file/URL, I'm going to select Browse, and I'm going to go right out here to my website folder, which is on my desktop. And I'm going to create a new folder and I'm going to call it css, right, so all my css is going to exist in here, starting with this one page just called styles.css, right? So that's the path that it's going to give me, sounds great, saving that, we're going to link to it of course, clicking OK, boom, there it is.

And this is the line that it adds, it says, hey, we're referencing that CSS page. In fact, look, right up here, styles.css, I can click on that. And that toggles between the CSS file and the source code, my HTML, so I can toggle back and forth. I'll typically stay in this source code area for the HTML, but now I want to start adding some CSS, some selectors, and some properties. And I'm going to start with selectors right down here.

Let me just grab these, kind of move that up. For selectors, what I want to do is I actually want to add some content to the body. I really like this feature because I can select body 'cause I want to change that background color. I can select that body tag, and now when I go over here to selectors, it says, hey, I want to add one, click, oh it recognized that body was selected. And then, all I need to do is hit enter, right? So I've just added that. What happened kind of behind the scenes, if you will? Styles.css, that's what it's added, right? So that's what it does for me.

Going back over here, let's take a look at the properties. Now that I added the selector, right, so that's what we're selecting, we need to give it some properties. So, with body selected, I can come down here and I can add a CSS property, okay. So I can click right here, and I can type some things in. But I encourage you to uncheck Show Set to give me all of the properties and you can see all of the various properties for this CSS body tag. Look at all of this stuff. But it's divided up by section, so don't get overwhelmed. We have layout, we have text, we have the properties right here for the border, background, and that's what we want to change.

There's also other right here. The background, that's what I want to do, is change the background, seems easy enough, right? Selecting, say, for instance, a medium gray like that, right, that's the hex color that I'm given. I can hit enter and obviously it's going to change that color. I know, super boring. I don't want this to be that boring, quite frankly. We're going to actually take it to the next level because we're going to locate a background image. So that's what I want to do. I don't want to worry about entering a file path. I can browse to that file.

So, if you have access to the exercise files, if you go into Assets, right in here, here's your background jpeg. It could be png, could be gif, that's what I want to locate. Selecting Open and watch what I get. It says, hey, you know what, I don't know where you got that image, but you need to put it in the website folder. Do you want to copy the file there now? And I'll say yes. Alright, so it opens up Copy File As, and I don't want to just put it here in the root, as it's known.

I want to create a new folder, specifically for images. All my images are going to be nice and neat in this folder, just like that, clicking Save, and there it is, image as background. This looks interesting though. If you want to know what's happening here, these two dots is actually jumping out of folders. So I'm actually inside of the styles.css, so we're going outside of the styles folder and then we're going back into the images folder to locate it. But I don't have to worry about that. Dreamweaver does it for me. You can see it adds the image back there. You can hardly tell what's going on.

Well, let's fix this. Let's change, say, for instance, the background size. Let's click right here. Let's have the image cover the entire background, okay, selecting Cover and that's what I get. I can kind of expand this down. Let's go to split view, but you can obviously see the image back there. So this is more along the lines of what I want. In fact, what I think is really cool is the background attachment. So I'm going to select background attachment, and I'm going to change this to fixed.

Cool, fantastic, let's click on styles.css. This is everything that it's created, wonderful, and notice how I have this little asterisk. This says, hey, you know what, this file has not been saved, so what I want to encourage you to get in the habit of doing is doing a Save All. So we'll save that file and all related files. It's all good. But now, we need to go ahead and preview this in a browser because I want to show you what that background fixed looks like. So, we'll go up to File, right down here under Real-time Preview, and it should list your browsers installed.

So it doesn't matter which one you're using. I have two, but I'm going to be using Chrome, okay, so that's the one I'm going to be using. Selecting it, it will launch Chrome, and here is my current webpage in Chrome, right? So this is what it means by cover, so it's covering the entire background. And if I kind of scrunch this up so I get a scroll bar, notice my content will scroll but the background remains fixed, okay? So, I encourage you to just test out your webpage and websites, just any browser.

The cool thing about the latest version of Dreamweaver, Dreamweaver CC, the 2017 release, is that this is actually a real-time preview, so even as I make changes to the HTML page and save those changes, it will actually update in the instance that is running in Google Chrome, okay? Love that, and that's everything, that's done. I'm going to make sure that everything's saved. I can select Save All, and you should congratulate yourself because you've just created your first file with CSS in it.

And not only that, but it's being attached to the body tag, which is the start of really fantastic things.