How to change or adjust the CSS styles in your Dreamweaver website.

Hey, awesome people. In this video we're going to transform this ugly green box and edit our css into this lovely gray box. So now we're going to go and adjust our css sheet.

So let's say we've got nothing selected, let's click on some random stuff. Why can I make this not work? There's going to be lots of times in this course where we're going to make a Style, and you're like "Huh, I need to change this." So what we're going to do is-- to go and adjust it, the easiest way-- it doesn't matter what you've got selected over here, just click on 'CSS Styles', 'Global'. Then click on the Style you want. Later on in this course, it's going to get longer and longer for Styles. At the moment it's super easy because we've got only one, one Selector. A Header, and now we're going to go and make an adjustment.

Now there is lots of adjustments in here. So what you can do to make life a little easier, see this option that says 'Show Set'? I love it. It can also be a real pain when you're brand new to this. That it's only showing you the things you have set, and you're like "Oh, where's the other things, where's the font sizes and stuff." So you got to remember, you control with this on and off during this course. And what it does is, really the only things it shows you is the things you've actually done. So we've done the Padding and the Background color. So what I want to do is change the Background color to black. And in our case, we're going to choose—

By default, most of the time we're going to use hexadecimal numbers, it's hash numbering. You move it around, you can see, these numbers correspond with the color. Now, what we want to do is, I want to lower the Opacity of this background. So we have to use this RGBa, it's the newer format. There's no real right or wrong. Hex is the slightly older version. RGBa is the newer version. And the reason it's cool is because it has this 'a' at the end, which means Alpha, which means Transparency, which means this, and those hex numbers don't have it.

You can see, I can make it slightly transparent. So I'm going to drag it to black. And we can see now, it's kind of looking gray but later on when we get some images behind it, it's going to be slightly transparent. It's up to you whether you want to do this now, or a bit later. How dark? It's going to be hard to know until we get our images behind it. And we can adjust it later.

Another thing you can do is, say that this panel here is just driving you mad, you can just go to CSS Styles, you can see it there, there's my Styles. You can see, say the Padding needs to change, I can just change this to 12 at the top and 12 at the bottom. It doesn't really matter whether you want to use Code view or you want to use the CSS Designer panel. In this course, we're going to be sticking mainly to the CSS Designer.

Back to 'Source Code'. One last thing before we do is the 'Save All'. So whenever I make an adjustment to my css - I'm going to drag this around, hit 'Enter'. - you'll notice that this styles.css gets this little asterisk in here. And I want to hit 'Save', but because I'm kind of in Source Code, viewing my HTML, if I go 'File', 'Save' nothing happens, and I'm like, "Ugh." So I need to go and do this something called 'File', 'Save All'. The only problem with Save All is that it's a long way, and yours won't have a shortcut. I've made a shortcut for mine because it's something you should do before you preview anything in your Real Time Browser Preview or over in Chrome. So you go to 'Save All'. That means it saves this, plus the css sheet, and maybe some JavaScript we've got open. So 'Save All'.

To do the shortcut on a Mac, you go to 'Dreamweaver', go to 'Keyboard Shortcuts'. On a PC, it's under 'Edit', and right down the bottom there is one in here somewhere, that says 'Keyboard Shortcuts'. You might have to find it. So the first thing is, we're going to go to 'Menu Commands'. We're going to find 'File', find 'Save All'. And in here, we're going to add a '+' to the shortcut. It's going to say, "You cannot modify the default set". Click 'OK', we're going to create our own one. And you can call this anything you like. 'Dan's Dreamweaver Shortcuts'. I only half finished that. Okay, so go to 'File' and let's click 'Save All' now, and now hit '+'. And we can pick anything we like. I'm using 'Command Shift A'. On a PC, it's 'Control Shift A'. And that's going to—

You can use anything you like, it doesn't matter. Whatever you think you remember lots. That's how we're going to do it. Click 'Change', click 'OK'. And now, whenever I go, I can just say 'Command Shift A', and it saves all. If ever you go and preview in your browser, do 'Command Shift A' first, or go to 'File', 'Save All', the long way. Just so that everything is up to date because you can sometimes be previewing something in Chrome, and going, "It's not working, I thought I just changed that," and it's just because you haven't saved the documents. That is how to edit css and how to create little shortcuts, 'Save All'. On to the next tutorial.