Building the CSS

So, we've learned what HTML is, we've added an H1, and some text to it, that's the HTML. Now to Style this, we use something called CSS. I've created a CSS sheet here. You can see it here, it's in the related documents file, let's click it. I've done some basic stuff already. I've said, that Hero Box there that we made, I gave it a height, and that background color, if I hover above it, of pink. So I've got some stuff to get it started. Let's look at creating our own CSS now.

So, underneath this curly brace ' } ', hit return. Returns don't matter in CSS or HTML. So you don't need that return, you can have it, I just like to space them out a little bit. Just to make it easy for you to see. So when it comes to CSS, there's some basic syntax we need to follow. And basically you can copy what's up here, and say 'Body'. So that's the name, 'H1'. There's a space, and you can see there's a curly brace at the beginning and the end ' '. So that's what we're going to do, we're going to type in the first curly brace ' { ' and Dreamweaver is really clever, it goes-- whenever I have just an opening without a closing, it fill it in there for you. So it's put in that ending one for us.

Let's put in a 'return'. The return just gives us a better space to write things like this, like the height, and the color. So, first bit of syntax, curly braces. Don't forget the beginning and the end, or don't delete them. Next thing we're going to do is give this bit of CSS what's called an Attribute. And it actually just means-- I'm going to give it a thing like the color or maybe font size, these are called Attributes. So, you can see there, I typed 'co', and it pre-filled in color. And I hit 'return' and what it did is it filled it in, and added the colon ' : ' there. So the colon needs to go in.

Next things is to pick a color. Now the cool thing about Dreamweaver is that it has a Color Picker, or you can pick from your library, which is really cool. So let's click 'Color Picker', and what we want to do is drag this little circle here. We can drag it around, we can play with Hues, but what I want is, I want it to be in the top left hand corner. And that's going to be White. So drag it up there, and we're going to use White. If it goes horribly wrong, you can just type in '#FFFFFF', that is the code for white. Now the last thing, and the thing that a lot of people forget when they're brand new to CSS is, you need to hit semi colon ' ; ' at the end. So that's all the syntax you need for CSS. There's curly braces, and there needs to be one at the beginning, one at the end.

You type in the Attribute, in our case it's going to be the Font Color. And you put in a colon ' : ' afterwards, in our case Dreamweaver did that for us. And don't forget the semicolon ' ; ' at the end. Let's go and save it, but let's use the 'File', 'Save All'. That's handy because it saves both the CSS and HTML at the same time, they're actually separate files, so you switch to 'Source Code', which is HTML, and this one here is my CSS, they're actually separate files in my website. So I find, when you're learning it's better just to go to 'File' and 'Save All'. Make sure everything is saved, and then jump to your browser. Are you ready? We added some HTML, our H1, and we added some text. Then we've gone and styled our H1 using CSS. You're about to become a web designer. Ready, steady go. Awesome, huh?

You've added an HTML, and you've been able to style that HTML using CSS. That is the fundamentals of all web design. We're going to do a few other things just to make sure it matches our mock-up. Then we're going to move on and start looking at specific Responsive Web Design. So let's go and finish it up.