Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Adding Styles for Hyperlinks

  • We are going to create CSS styles for our nav bar hyperlinks
  • Open the contact-us.html page which contains default hyperlinks
  • Unvisited hyperlinks are underlined and blue in default html
  • Links you have visited are purple & underlined
  • We can use CSS to change these properties and add additional ones
  • We will create the look of our hyperlinks using CSS
  • There are 4 links states available, only 3 are usually used
  • These styles are called pseudo-class selectors
  • They have a : in the name
  • 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.

  • Intro 0:00
  • Basic Hyperlink Styles 0:36
    • Create New CSS Style
    • Selector Type
    • Selector Name
    • Set Font Family
    • Set Font Size
    • Text-transform
    • Set Color
    • Text Decoration
    • Set Line Height
    • Set Font Weight
  • Preview in Browser 5:47
  • Add Visited Link Style 6:38
  • Add Hover Link Style 8:40
    • Change Background Color
  • Add Active Link Style 11:26
  • Summary 12:37

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

Let's take a look at how to do that.0078

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

So, actually, let's do Lucida Sans.0214

I'll choose this one; now, this is a default font stack (what it's referred to as), and those are prebuilt in Dreamweaver.0219

For my font size (these are hyperlinks), I think what I'll do is do .95 (so they are similar to my paragraph sizing), and I'm going to use ems as the unit of measure.0227

That is just a little bit smaller than the default size for my system; in other words, what you are looking at as default--it will be just a little bit smaller than these hyperlinks.0240

Usually, the default size is a little bit large for standard text.0253

Font weight--I'll leave that alone; but what I am going to do is add text transform.0257

Now, all of these are capitalized; but what I am going to say is "Make them uppercase."0264

As far as color is concerned, let's pick a color; I'll go ahead and make them red, so that they stand out on the page.0270

And what I am going to do is say "Text Decoration: none."0279

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

As soon as I click on them, they end up turning purple.0389

So, how do I deal with that?--well, I want to make a visited-link color.0394

So, what I am going to do is right-click this a:link and say Duplicate.0401

This time, I'm going to choose Compound, but I'm going to choose Visited as my link state; these are known as the four states of a hyperlink.0407

I'll choose This Document Only again and click OK; I won't see any changes on the page, and that is because I have to go out to the browser to see the changes.0420

Let me see what it looks like now.0432

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

Now, what if I want to make it different when I hover over it?0521

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

Just make it really obvious what is going on.0715

Now, when I put this in the browser (I'll go ahead and save it), when I hover over this, you can see, it is the same as it was.0719

But watch what happens when I click it: you could see it change just for a second.0730

The Active state occurs when I hold my mouse down once I've clicked.0737

It is a state that really is just there to confuse people; so I am going to remove the Active state by selecting it and hitting the trash can in this panel.0744

I just deleted that one; but those are the four link states that are available for you, for your hyperlinks, and a few of the different properties to adjust them.0755

The property that gets rid of the underline is this property here, Text Decoration of none.0767

And you can use that Hover state to make it a little more obvious to the user exactly which link it is they have chosen.0774

Those are the four link states you have available for a hyperlink in CSS and how to add those particular link states to your web pages using CSS.0783

Thank you for watching Educator.com; see you in the next lesson!0795