Adobe Dreamweaver CS6 Adding Styles for Hyperlinks

In this lecture, our instructor, Candyce Mairs, shows how to add styles for hyperlinks. She demonstrates how to create a new CSS style, set various style options, add a visited link style, add a hover link style, and add an active link style.

We will create styles for all 4 link states so you can see how to create them & what each state can be used

Create a new CSS style rule, choosing Compound from the dropdown list

Then use the down arrow in the next area & choose a:link

What we want is to change the font information, modify the color on hover, and remove the underline from these links

Create the styles for link, visited & hover from this dropdown list

Be sure you have them listed in your CSS style panel in the same order as Dreamweaver shows them in the list or they may not work correctly

Adding Styles for Hyperlinks

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

Transcription: Adding Styles for Hyperlinks

We are now going to take a look at adding styles to our hyperlinks within HTML.0000

By default, as you can see, a hyperlink is royal blue and underlined, and a visited link (if I have visited one) is underlined and purple.0007

Every browser has that as its default values; users can change it, but they don't really realize that is possible; and in most of your web designs, this will not be what you want it to look like, which is exactly the same as our situation.0020

So, what I want to do is: I want to go ahead and work with these hyperlinks and style them.0036

Now, there are a few different ways we can go about doing that; and what I am going to do here is just add some basic styles.0044

When I come back later to working with my specific designs, I may expand upon this concept, because what we are going to do now is style the hyperlinks for our website, and you can style them to look different in different locations on your web pages.0053

But we are not quite there yet, so we are just going to stick with basic, standard hyperlinks.0072

What I am going to do is create a new CSS style; and I do that the same way I create any CSS style.0081

I go over to my CSS Styles panel and click the + sign; when I do that, I actually have four options up on this top dropdown menu.0088

I have a class; I have an ID; and I have a tag--the three main types of CSS selectors.0099

But I also have this bottom one that I haven't paid any attention to yet, and I am going to right now: it's known as Compound.0107

What that means is: it is a compound selector, meaning it is more than just a basic class, a basic ID, or a basic tag; so I'm going to choose Compound.0116

Now, wherever my cursor is will determine the information that comes in here as a selector; and my rule of thumb for you is: never accept what Dreamweaver drops in here.0129

I would normally delete this; but what we are going to do is use some styles that are already in a list, so we don't have to type them.0141

When you choose Compound up at the top, if I click the dropdown arrow, notice, I have a link, a visited, a hover, and an active.0151

Those are the four different link states that you can add for your hyperlinks: let's take a look at them.0163

The first one I'm going to create is a link; I'm going to put these in this document only--when it comes to the actual Wanderlust Travel pages, we will have some different styles set up for that.0170

But for the time being, our Contact Us page is going to have internal styles; I can always delete them later.0185

I'll click OK; and now, I determine what I want those hyperlinks to look like.0193

So, I'll go down in the font family and choose one; and I want it to look different, so let me go down here, and I think I'll choose Trebuchet (which may end up Arial if you are on a Mac and don't have that specific one).0199

This is how you remove the underline that shows up by default on hyperlinks in HTML: text decoration of none.0285

The other thing I want to do is spread them out just a little bit; so my line height is .95, so I think I'll go with 1.2; I'll add a little bit; and my general rule in line height is to go about 25% larger when you go to work with the line height.0295

Start there, and then you can kind of see and go up and down from there...and I will make that ems, as well.0314

Now, when I click apply, you can see it definitely changed my text; so I can take a look at what I think about that.0321

Now, I can check and see if I want it bold or not; so I'll change font weight to bold, click Apply, and there it is.0330

I'm going to go ahead and keep it bold for now, just because it's really easy to see.0339

I'll click OK, and the only way you can truly see what is going on in the browser is to put it into the browser, so I'll go ahead and do that; I'll use Chrome.0345

For this one, it doesn't really matter which browser you are in; you will see about the same thing happen on your hyperlinks in all of them.0359

Now, notice, my Home is showing up as red, just like in Design View; but notice, my other ones are not--they are a purple.0369

Why are they ending up purple?--well, first of all, we only created red hyperlinks for links that have not been clicked on yet.0379

And there they are: they are red; if I click on Destinations, and I click back, notice, it is still showing up red.0435

Now, that is in Chrome; why is it still red?--well, if I open up my Styles, all I did (let me close this up) was exactly duplicated it; so both my unvisited and visited links are exactly the same color.0444

What I want to do is change the visited; so I'll make the visited...what will I make them?--let's go with something obvious: we'll do green.0463

I just changed them to green; I'll save the page; and now let's take a look.0475

I'll stay in the same browser, simply because a browser stores its own history; so if I go to another browser, I may have a subtle difference.0480

Now, you can see they have definitely turned green if they have been visited; they stay red if they haven't been.0490

If I click on Home and go back, now it's green because it's visited; it is possible to go out to the browser history and delete the history for the browser, and that is how I would make these all red once again.0497

But that is the regular link and visited states of a specific link.0513

Let me right-click Visited; I'll say "duplicate" once again; this is going to be a:visited, This Document Only; let me click OK; and that wasn't exactly what I wanted.0525

I duplicated the exact same thing; and if I went down here and changed the color, I would now have two rules conflicting with one another.0540

What I want to do, instead, is make this Hover; well, I can click on the style, right in the Styles panel, and just get rid of Visited, and have it say Hover instead.0550

It is possible, not just to move these different rules around within the Styles panel...but you can also modify them if you need to.0564

So, that is now my Hover state; I'll go ahead and make this one yellow.0574

Let's see what happens when I take this out to the browser; and let me do Safari now--let's see what Safari is doing.0581

OK, see, when I hover over it, it turns yellow--not exactly readable.0590

So, what I am going to do, in addition to that hover, is: I am going to add another property.0597

With that selected, I'll pick the pencil here; and under Background, I am going to change the background color for that Hover state to black.0603

Now, let's watch what happens...and this is a way you can make your hyperlinks look somewhat like images.0615

Notice, as I hover, I have changed them; and I can add padding and a few other things so that I get some area surrounding these links; but for now, I just wanted to make it really obvious to you what was going on with regards to the different link states.0623

Now, the important piece in working with these is: you have to make sure the Hover state stays underneath the Link and Visited.0643

So, always use them in the same sequence that Dreamweaver lists them.0651

If I take Hover and move it up--save it and put it in a browser--I will now not have a functioning Hover state.0657

I'll go back into Chrome (you saw that it worked there); and can you see?--it adds the black, but it is no longer working correctly; we are not getting all of the different properties.0666

Always make sure it's Link, then Visited, and then Hover; that is the sequence.0678

Now, there is one more; we might just as well add it; we'll change to Compound and use the dropdown, and it is an Active.0686

This is a strange one: so what I am going to do is make it really obnoxious so that we can tell what is going on; I'll make the font size very big, and I'll change the color to hot pink and make it bold.0696

Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.