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.