Change link font & color

Questions

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025