Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott and I'm a trainer here at Bring Your Own Laptop. What we're gonna look at this tutorial is we're gonna look at styling our links or our hyperlinks in Dreamweaver. So they are these guys here. When clicked, they jumped to another page. They've got some special properties that we're gonna have to remove.
So we start our H ones, which are heading ones, and our H twos, our heading twos and our paragraph tags, our P tags earlier in the tutorial. Now in this one we're gonna look at these guys. So, um, these guys come along with a few defaults. They go blue, they are times near Roman, they're moderate size and they've got this little underline under them. So what we need to do is we need to figure out what the tag is. Now in the previous tutorials it was easy because we actually made this one an H one.
So we really knew that was an H one tag and we created this one, we call it an H two. So in this one though, these guys get made. When we add a hyperlinks, they get a tag added to them, how to figure out what tag these guys are. So we can style them with our CSS. It's quite easy. So I've highlighted the word home and down the bottom here, this is my tag selector.
I love this guy. He tells me what the tags that are applied to this. So the body is the overall part of the website. That's everything that the user sees. Okay? You generally don't have to worry too much about the body tank.
He is in an unordered list, which is a bullet point, and inside this list item, which is the dot itself. Okay? And this is the bit I wanna play around with. This is the A, it's called the active link. So unfortunately, yeah, it's, it's not easy to guess. So it's the A tag is what a hyperlink is.
So if I style my A tag now it will style 1, 2, 3 of my, um, hyperlinks. So let's give that a go. So I've got my cursor flashing in here. Why not? Um, it doesn't really matter where your cursor is flashing. You can type it in afterwards.
I'm gonna go make sure it's going in on my design. Uh, CSS design. I'm gonna make sure it's at the main css. I'm gonna create a new selector and you can see it's brought through whole list. I just want to style the A. So I'm gonna delete everything.
That's not the A. And what I'd like to do is I'm gonna play around with, uh, the color, which is an important one 'cause it's gone blue. So I'm gonna zoom out so you can see everything. So you can see my hyperlinks over here. They're blue. So go down to text and you'll CSS designer font color.
I'm gonna change it to, I'm gonna change it to green. Click enter. You can see my hyperlinks over here. All gone green. Perfect. And the next bit we're gonna do is, um, play around with a font.
So I'm gonna pick my gill sends. Lovely. And the last one is The text decoration. It's this line underneath it. You can see down here under text decoration. There's my options.
I've got one called none. There's the underline, which it's already got applied. There's a overline, which I'm never sure what to use for and the line through. So what we need to do is say none. If you leave it blank, it's gonna stay with the default, which is the underline. But if you tell it, say, I would like you to be none, none of these things, if I zoom out now, you'll see my home about us and contact us.
Have nothing applied there. Great. Um, so that's how you style a slightly more unique tag. Um, and definitely how you style the, uh, hyperlink or the links. Alright, thanks for this. I'll see you in the next tutorial.