Hi there, in this tutorial we’re going to create our very first css sheet. You can see in there. We're actually going to Style our Header. Don't worry, it's not going to always stay this awful green. And we're going to add some Padding and some awesome css-ness. So get ready to make your very first css sheet.

So far we've created a HTML page. It's 'index.html'. Got a bit of html going, not much. Now we need to go and Style this Header. And we Style it using css, with cascading Style sheets. To create a Style sheet, we go to our 'CSS Designer' panel - I'll close down the DOM from the last tutorial - and in here if you can't see your CSS Designer, there he is there. If yours doesn't look like mine, you've got to drag it out. And what we want to do is, under 'Sources', we're going to click the '+' button. And we're going to go to 'Create New CSS File'. You can give it any name you like, but everyone calls it 'styles.css'. I'm going to click 'OK'. And a couple of things happen. First of all, on my 'Desktop', in my 'Dan's Awesome Portfolio', that got created. It's just a separate Style sheet. There's the index.html file made, and there's this other guy. There's nothing in there. It's just where we put all our Styles, and keep them separated.

So back into Dreamweaver. The other thing you'll notice is that my html updated a little bit. Can you see, Dreamweaver has linked the two. So that's how that index file knows that styles.css exists. Because at the moment they're separate files and in here, in the Head, Dreamweaver says, "Link to the Style sheet please" and that's what it does. Also handy thing for Dreamweaver is this thing called the Related Documents Bar. You can see at the top here, it links to it because this is a separate sheet, watch this, I can click on it. And there it is there, there's that styles.css, this down the bottom. It's showing you at the top, my Index, but down the bottom it's showing you this separate sheet. That's what Source Code is. They should just call that html. So think, when you see Source Code, think html. And this here is another document. Back to the html.

So that is how you create and link a Style sheet, super easy. Now we're going to go and Style our Header. To do it, you got to make sure that-- you might be set to 'Current'. Current is awesome when you know what you're doing. We'll do it a little bit later in the course but stick to 'All'; 'All' makes life easier. So what we're going to do is, we're going to click in here. It doesn't really matter where you click actually, but we're going to create our very first Style. So we kind of work through these procedures here, we work through all these boxes. So first of all we say, "I want the Style to go inside styles.css" It's really uncommon to have more than one Style sheet. Occasionally we can to have two if you're using like a Template, like Bootstrap. But we're just going to have one css for this whole document.

Media Queries, we're going to get into later on when we look at mobiles and tablets. You can skip that for now, we're going to stick it inside and call Global. And we're going to create this thing called Selector. We're going to be doing lots of Selectors. And this selects the thing we want to Style, so I'm going to hit '+'. And in here, it's defaulted to whatever I've selected. But all I really want is, I'm going to-- I don't want the Image that's inside the a-tag, that's inside the Header. I just want to Style my Header. You can just type it in. It's up to you whether you get it by default or whether you just want to type in Header. So I'm styling this thing here called Header. So, what do I want to do to this Header? So, I'm going to click on Header over here. And what I would like to do is first of all, just change the background color, nice simple one. Got this really big long line of things that we can style in css.

What Dreamweaver does is, along the top here, it puts it into little groups. This one here is Layout, you can see it there. Then there's 'Type', Type starts there. So what I do is I just click on these to jump through that list. You can slide up and down, totally up to you. I'm going to jump to this one, called Background, because it is background color, we're going to pick big naff green. To pick colors, you just slide this thing up and down until you get the Hue right. And then click, hold, and drag the little circle around till you find the color you like. There is the dark and light version. Or just move it around in here, and that's how transparent it is. We're going to pick a big naff green for the moment I'm going to change it in a minute. Then I click 'return' on my keyboard. Now, we have a Header that has some css. And that my friends is all css is. It's a separate sheet, that you add some Styles to. You just make sure you use the right naming.

We've matched the word Header here in my html with the Style here in my Selectors. And yes, it's gone and colored it. Now let's have a look at our css sheet. Let's go to styles.css, there he is. That's what a css sheet looks like. In terms of coding for the internet, css sheets are the most simple to look at. There's the word Header, that matches completely the word and the syntax here in my html. And, it says background-color: # equals, and that's the color. If we hover above it, that's the color there. And it always ends in a semi-colon. It's all wrapped up in these curly braces. So those are the syntax things. So you can type css, perfectly fine. A lot of web designers do. But what we're doing in Dreamweaver is we're using this CSS Designer panel to do the heavy lifting. This character set at the top here just says I'm using an English keyboard.

Let's jump back to Source Code. And what I want to do is put a little space at the top and left of this Logo so that it's not just jammed up against the side. I'll make sure I'm working on my styles.css on the Global version, I'm on my Header. You can see here, we got Padding and Margin. Padding and Margin is a good one to explain now. Padding is the inside of this box. If I click, hold, and drag that to the right, it gives me Padding. So it moves a little bit down, at the moment, 36 pixels. I'll undo that. Margin does a similar thing, it pushes down from the top but it pushes from the outside of the box. If I didn't have a colored box in here, if it wasn't green, you wouldn't notice the difference, the Logo still moves down that certain amount of pixels. So sometimes it doesn't really matter whether you're using Margins or Padding. Sometimes, obviously in our case it does, because I want the Padding inside the green box.

Now where do I get my measurements from? Now, if you're working with a designer they should have sent you some specs. How detailed are these specs? It's probably not going to have how far the Logo was from the top. But you will get a visual. And we can measure it. Now, if you are the designer of both the visual, and doing the Coding side, it's going to be even easier because you're going to be able to just jump out to your file. Now it doesn't really matter whether you've designed this in Photoshop or Adobe Illustrator. They both have very good web design tools. I've got courses on both of those. If you want to do the design stage, go check out those. In this case, we're designing something we designed in another video tutorial series in Illustrator.

We're going to open up the finished design from that. It's in your 'Exercise Files', open up 'Illustrator Layout' and open up this one called 'Portfolio Website.ai'. So where have we ended up? Here it is, this is my design. Now I want to start pulling measurements from it. So I'm going to zoom in, have a little look at this guy. I want the height and the sides here. Now the official way is, there is a Ruler tool. So Eyedropper tool, Measurement tool. And you click once there, and click once there. And it gives you the width, so it's 19 from the side. And you can click once here, click once there. You can see, it's 10, the height, so about 20 and 10, it's never exact. So just stick the whole pixels, they're tiny measurements anyway so just stick the whole pixels. And so that's the official way.

What I tend to do is grab the Rectangle tool, and use this. Why? Because it snaps, which is really cool. Can you see, it just kind of joins up and really wants to snap to the edge of things. If yours doesn't, go to 'View', make sure 'Smart Guides' is turned on. That one there, that will stick to the edges. The other nice thing is, watch this I can click here, and it snaps right to the corner. You can see there, there's my height. You can see, this is kind of intersecting so I know my height and width in one go. You can see, it's 19 from the side, and it's a height of 10 pixels. So that's what I'm going to use to translate into Dreamweaver.

So when I'm building a site, and I've got my design here in either Photoshop or Illustrator, it doesn't really matter. I pull my measurements from-- I'm going back and forth between these two programs, so Dreamweaver and Illustrator, in our case. So what I want to do is, I'd like to have a height of 10. And I would like this left hand side of 19. And you can see, it pushed it, 10 down, 19 across. And what I'll do is, I'll do on the right hand side as well because we'll have some navigation on it eventually. The same for the bottom, I want 10 at the bottom just so that there's a gap that matches the top.

All right my friends, so that is how to create a css sheet, styles.css and we've done some basic styling using our CSS Designer panel. If you're using a version of Dreamweaver like CS6 or earlier, you're not going to have the Designer panel. That sucks because this course is all based around the CSS Designer panel, and it's awesome. So you might have to look at upgrading. Can you get on in this course without it? Probably not. You might want to check out my Coding version of Dreamweaver course. So go check that out.

All right, let's get into the next tutorial where we look at editing css rules.