Change font h1 or p tags using CSS

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 the last tutorial we looked at creating our CSS  sheet, which you can see over here called Main css. And we start our H one tag, okay, which you can see here,  which is our H one selector. And we added some values to that. So, um, what we'll look at is styling some other tags, okay?

Which essentially means repeating  that process we did with the H one a few times. So let's get some practice in and let's give it a go. So to get things started, it is quite nice  to have your cursor flashing in the tag you want to update. So I wanna update this H two. You can see down here, if I click in here it says I'm an  H two or heading two. Um, so if I have my character flashing in there,  I make sure I click on my main do CSS.

You've gotta make sure that's selected. So you've gotta make sure I'm going want the styles  to go into main do CSS  and I would like to create a new selector  and it's gonna default to body H one. It might be something different for yours. Say if it does pick something crazy  and it has, it has tags that you've never seen  before, you can just delete them  and say, I'd like to style an H two. You don't have to have the cursor in the right place. It's just a helpful starting point.

So the H two I'd like styling enter  and I'd like to style the type of this H two. Okay. And we can pick the color. So I can pick a color. Now if you want to pick a specific color,  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 color picker update on the bottom right? So if I wanna pick this exact blue from the combi here,  I can click this guy, click enter,  and it's picked that exact blue from the  combi from my H two. So I'd like to change the font. So the font family, I'd like to change it  to my gill sands the same as I did my H one,  but I'd like to remove the bold as well. So I'm gonna find font weight  and I'm gonna change it down to normal.

And I'd like to play well in the font size as well. So we use pixels in the la uh,  points in the last, uh, tutorial. So we'll do the same here. We're gonna create,  the last one was about, um, 20 something, wasn't it? So we'll try 20 for this something. Uh, for this one, so I'm gonna zoom out.

It's exact same size, so I'm gonna go down to 17. Lovely. So slightly smaller H two. Now Google doesn't mind with what size or color  or font your H ones  or H twos are, as long as they, um, as long  as they have those H one  and H two tags so they know which is more important. And you can style it as you like. Now you can go through and play around  with the alignment if you right.

Um, and you can play with centered, uh,  left line text decoration. You can play around with, does it have a strike  through the middle or an underline? Okay, not maybe not that helpful. Um, and I'll let you play around with text shadows  and any of these other words,  s facing ones as well in your own time. So zooming back out, let's do the last one. Let's look at the P tag.

So have your cursor flashed anywhere in the P tag? You know, you're in the P tag. 'cause down at the bottom it says I'm in the P tag. You can see if I click in my H two, it updates. If I'm in my P tag, it updates great. So I wanna style this P tag  and I'm gonna click on my main do CSS.

I'm gonna hit the little plus button. It's gonna say body p, I don't want that. I just want the P I'm gonna hit enter, jump down to the type  and I'm gonna say color. I'm gonna leave as it's default. It will de default to black and that's fine. Font family though, I'm gonna pick something different.

I'm going to pick, um, I'm gonna pick a sand serif,  so sorry, a sift font. So one that has little feet on the edges. So I'm gonna pick Cambria, you can see it there. It's updated AC Cambria. Um, it's also, remember, um, it's gonna default back to  hmm, text or liberation or times  or times New Roman if it can't find this  particular font on the machine. So, um, size wise, I'd like to change.

So I'm gonna play around with the size  and I'm gonna change points. And a really common body copy size is about 13  or 12 depending on your kind of clients. So you can go a lot smaller, you can get down to 10 point,  but you're starting to get into the, um, uh, it's,  it's quite cool to have 10 point  but not always that, uh, readable across all sites. So you've got to make sure that if your sites dealing  with the general public like mines,  I'm gonna have it a lot bigger so  that it's easy enough to read. Um, we're gonna look at s at a later point. Um, so if you wanna skip through and um, and tutorials  and see if you can find the tutorial on Eames,  we'll talk about that 'cause it's a bit  of font size that Google likes.

Great. So I've got a black, I left the black,  I've picked my new font and I picked the size. That's all I want play around with now for the p tag. Now what we'll do now is we'll have a look at the CSS  that's been created in the background. So, um, we know from an early tutorial  that I'm working on my index page,  but actually I'm putting all the styling into this thing  called main css. I've been clicking on it on the right hand side here under  sources and that's where it's been putting the styling.

And let's have a look. Now, the way  to have a look is in the top right hand part of Dreamweaver. The source code is your HTML, okay,  which is your index page. Now this here is our main do CSS. If I select it, it will show me a split screen. So on the left hand side here is all my CSS.

And on the right hand side is my index page. So there are two separate files,  but Drew we is really clever. It's showing you both at the same time. And you'll see the CSS sheet is actually quite  simple, simple enough. See my H one, there's my H one tag. It opens with this bracket here  and closes down the bottom here.

And it within this brackets, it has all the styling. So my H one has a font color of RGBA  and it has these numbers in here. You might see a hash and a few numbers. If you're using a slightly different version  of Dreamweaver, that's totally fine. You can see here's my font suggestions. I'm suggesting Gil Sands and then Myriad.

And then deja vu here has my font weight  and also my font signs. Now depends on how you'd like to update. Um, I prefer to update my CSS by, um, clicking in here  and, um, so down on my H two and,  and doing it down in this properties panel and updating it. But it's totally fine  to do it on this left hand side here in the CSS,  it's essentially doing the same thing. So if my H two, I would like to make a lot bigger,  so I'm gonna make it to 20, uh, 27, oh, zoom out. And if I click on this side, can you see it's updated  to a lot bigger font size.

I could change it to 57 and watch it update here. A really big H two. So it doesn't really matter whether you are doing it, um,  on this left hand side in the CSS itself  or using h um, dreamweaver's tools and using the H two  and going down to text. And you'll see it's at 57 or so. Okay? So it's up to you.

Alright, so you can move your way around the document now  and start styling your H ones, your H twos, your P tags,  and any other tags that you might have created using this  exact same style. Um, all right, I'll see you in the next tutorial.