Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott  and I'm a trainer here at Bring Your Own Laptop. Um, in this course we're gonna be looking at  creating our CSS sheet, um, which is short  for a cascading style sheet, which will style our fonts. So the first thing we need to do is make sure you can see  your CSS designer on the right hand side here. If you can't see it, it's under a window. And just down here, make sure the tick is on CSS designer.

So the first thing we need to do is create our CSS sheet. Now hit this little plus button on the sources panel, okay? And we're gonna cruise, create a new CSS file. Now what will happen is it's gonna create a file for us. So a CSS file is an extra file  that's gonna go into our website  and we're gonna give it a name. I'm gonna call ALS Main.

It's really common to call it main,  but you can call it anything you like. Okay? There's no specific naming conventions for CSS. Just try and avoid things like spaces  and don't use any of the characters like a dollar sign  or an asterisk or an a symbol. Any of those sorts of ones can cause you problems. Leave it as a link and let's click.

Okay. Alright, so what's happened now is it's created a CSS sheet. It's put it up here in our related documents,  but it says this is our HTML page. But this is a separate sheet that is related  to this document to help it work. And I'll show you on the desktop as well. So in our website we've got this new sheet called CSS.

Okay? So main Cs SA separate sheet,  but together it's gonna style our website. So first thing we've done is created our CSS sheet. It's over here. Main css. Now we're gonna, we're gonna skip media, okay?

'cause that's getting a little bit more complicated. We'll look at that a later tutorial. That's for the media queries when we're looking at mobile  and tablet versus desktop for the moment,  we're gonna move to selectors. So, um, to help dream move along,  what you can do is you can highlight the, the,  the sticker you wanna play around with. So we're gonna play around with this thing called a tag. So remember our H one tag.

So we're gonna play around with this. So the overall name for a tag is called a selector. So this one here, we are gonna pick ours main CSS,  and we're gonna create a selector. Now it tries to do its best at defaulting  what you are trying to, trying to know  what your intention was. Now it's created this one for body H one. I just wanna style the H one by itself.

I'm gonna hit enter on my keyboard. Great. So in my main CSS, I'm tying the selector called H one  and down the bottom here, these are all the properties  that I can play around with in CSS. Now it starts off with layout. We wanna jump to the one that says type, okay or text. Click on the T and it will jump down the list.

It's a big long list. It'll jump down to where it says type. So we can start playing around with a few parts. We can start playing around with color. So let's have a look at the color. You can slide this hue slider up  and down to pick your colors.

Now you'll notice it still stays black at the top here. It's because this circle needs to be moved out  to the different levels of the color you would like. So move it out to the middle  and you'll see now I've got a nicer blue  and now I can play with a hue slider and adjust the color. So I'm gonna pick a blue rough kind of blue there. Um, you can make it darker or lighter. Okay?

And you can play around with the  opacity of the color as well. I'm gonna leave mine at this blue  and when I'm finished I'm gonna hit enter on my keyboard  and it's put the color into my CSS. And you'll notice over here my H one is now this blue color. Alright, so, um,  let's have a look at styling some of the other parts. So I'm going to click inside my H one  and you can see down here it's defaulted to H one  and I got my color there. Now font family, let's drop that down.

So I get to pick a font. Now what happens with fonts on a website is  that you don't embed the font like you do in a  JPEG or A PDF. What happens is you add the code to the website  and your website asks your user do they have  that font on their computer? That's why there's this big long list with all these commas. So what we're gonna do is we're gonna pick GIS sands  and what we're asking the user's computers, um,  when it loads the website is say, Hey,  do you have GIS sands on your machine? If it does, it will load it.

If it doesn't, it will look for this other font. The next one, GI Sands mt. If it doesn't have that, it will look at Myriad,  then Deja Vu, then Hal Vica, then Ariel,  and then the San Serif one. So it's bound to have one of these fonts. So when you are picking fonts, know  that you've suggested GI Sands,  but it might end up being Myriad Pro. Later on in the course we're gonna look at something called  the at font face, um, value.

And that will help us pick more specific fonts  and help get a bit more consistency. But at this stage we're gonna suggest fonts. So pick Gill Sand. And you'll notice over here it's picked  a nice big gill sense. So the default for an H one was  big black times New Roman. And um, it's got this big space afterwards.

So we've gone through and changed it to blue, um,  Gill Sands, but we've left the bold on there. So if you wanna remove things like the bold down here in my  properties, down the bottom right, uh, font style is to do  with italics or not. I'm gonna leave that normal, uh, font variant. You can change it to small caps, font weight. This is the one I want to, to play around with my bold. So you've got normal or bold.

There are some other options in here, but  unless you are really, really understand  how the at font face value wick at the moment,  leave these ones and you can only play with normal and bold. We'll look at these at a later course. So normal and bold. I'm gonna set it down to normal  'cause I wanna remove the bold by default. It was bold, so I've moved it to normal. Alright, there's a few  other things you can play around with.

And let's look at font size. So to start with, we're gonna look at pixels or points. It's up to you, which you prefer to use. We're gonna use, uh, points, um,  and we're gonna pick something big, something maybe 20,  but not, not too big. Um, so watch this. When I hit 20  and I enter, there he is over here.

My H one is a more useful size. Um, obviously you can go bigger and smaller. You need, and we're gonna use points for the moment. Later on we're gonna be using something called ends,  but for the moment, use points  or pixels, it doesn't really matter. So let's uh, leave it there. And after the next tutorial,  we'll look at styling some of the other tags.

We'll style the P tag and the H two  and we'll style these link tags as well. Great. So that's the end of this tutorial. I'll see you in the next one.