Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott and I’m a trainer here at Bring Your Own Laptop.

Now in our last tutorial we looked at creating our own CSS sheet , which you can see over here called main sheet CSS. We styled our H1 tag which you can see here, which is our H1 selector and we added some values to that. So, what we’ll look at is styling some other tags, which essentially means repeating that process that we did with that H1 a few times so lets get some practice in and give it a go . To get things started it is quite nice to have your cursor flashing in the tag you want to update.

So, I want to update this H2, which you can see down here, if I click in here it says I am in H2, or heading to. If I have my cursor flashing in there, I make sure I click on my main. CSS, you have to make sure that is selected. So I want the styles to go into Main > CSS and I would like to create a new selector. Its going to default to Body. H1. It might be something different on yours, so say if it does pick something crazy and it has tags that you’ve never seen before, you can just delete them and say I'd like to style in H2.

You don’t have to have the cursor in the right place, its just a helpful starting point. So the H2 (I’d like styling) so I’ll hit enter and I’d like to style the type of this H2. Ok, and we can pick a colour. Now if you want to pick a specific colour you can use this eyedropper, so I’ve clicked the eyedropper down the bottom here and watch this, I can move around the document and can you see the colour picker update on the bottom right. If I want to pick this exact blue from the Kombi here, I can click this guy, click enter and its picked that exact blue from the Kombi for my H2. So now I’d like to change the font, from my font family. I’d like to change it from my Gil Sans the same as I did my H1, but I’d like to remove the bold as well so I’m going to find my font weight and I’m going to change it down to normal and I’d like to play around with the font size as well so we used points in the last tutorial so we’ll do the same here. The last one was about 20 something wasn’t it, so we try 20 for this one.

I’m going to zoom out, its the exact same size so I’m going to go down to 17. So a slightly smaller H2. Now Google doesn’t mind what size or colour or your font your H1 or H2’s are as long as they have those H1 and H2 tags so they know which is more important. You can style it as you like. You can go through and play around with the alignment, centered, left line, text decoration. You can play around with, does it have a strike through the middle or an underline. And I’ll let you play around with text shadows and any of these word spacing ones as well in your own time. So zooming back out lets do the last one, lets look at the P tag. So, have your curser flashed anywhere in the P tag.

You know your in the P Tag cause down the bottom its says I’m in the P tag. You see if I click in my h2 it updates, if I’m in my P tag it updates. Great, so I want to style this P tag and I’m going to click on my main dot CSS and I’m going to hit the little plus button and Its going to say body.p, I don’t want that, I just want the P and then I’m going to push enter. Jump down to the type and I’m going to say colour. I’m going to leave as its default, it will default to black which is fine. Font family though I am going to pick something different.

I’m going to pick a serif font. So one that has the little feet on the edges, I’m going to pick cambria and you can see it there, its updated to cambria. Its also going to default back to Hoefler text or Liberation or Times or Times New Roman if it can’t find this particular font on the machine. So, size wise I’d like to change so I’m going to play around with the size and I’m going to choose points and a really common body copy size is about 13 or 12, depending on your kind of clients. You can go a lot smaller, you can get down to 10 point but your starting to get into the unreadable sizes.

You’ve got to make sure that if your sites dealing with the general public, like mine is, I’m going to have it a lot bigger so its easy enough to read. We’re going to have a look at EM's at a later point so if you want to skip through the tutorials and find the tutorial on EM's we’ll talk about that there cause its a better size that Google likes. Great, so I’ve got it black, I’ve left it black, I’ve picked my new font and I’ve picked the size, thats all I want play around with now for the p tag. What we’ll do now is have a look at the CSS thats been created in the background.

Now we know from an earlier tutorial that I’m working on an index page but actually I’m putting all this styling into this thing called main.css. I’ve been clicking on the it on the right hand side here under sources and thats where its been putting the styling. Lets have a look now. The way to do that is to go to the top right hand side of Dreamweaver, the source code is your HTML,which is your index page. Now this here is our main. CSS and if I select it, it will show me a split screen. So on the left hand side is all my CSS and on the right hand right is my index page. So, there two separate files but Dreamweaver is really clever at showing you both at the same time. Now you’ll see that the CSS sheet is actually quite simple. 

Theres my H1 tag, it opens with this bracket here and closes down the bottom here. And within these brackets it has all the styling. My h1 has a font colour of black, and it has these numbers in here. You might see a hash and a few numbers if your using a slightly different version of Dreamweaver and that totally fine. You can see heres my font suggestions, I’m suggesting Gil Sans, etc etc etc. And here is my font weight and also my font size. Now it depends on how you like to update. I prefer to update my CSS by clicking in here and say down in my H2 and doing it down in this properties panel and updating it. But its totally fine to do it on the left hand side here in this CSS.

Its essentially doing the same thing. So if my I’d like to make my H2 a lot bigger, I’m going to make it 27, then I’m going to zoom out and if I click on this side, can you see its updated to a lot bigger font size. I could change it to 57 and watch it update here, a really big h2. So it don’t really matter whether your doing it on the left hand size in the CSS itself or using dream weavers tools and using the h2 and going down to text and you’ll see its at 57 also. So, its up to you. You can move your way around the document now and start styling your h1 ‘s your h2‘s your p tags and any other tags you might have created using this exact same style. 

Alright so I’ll see you in the next tutorial.