Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Using icons
- Navigating with Spry widgets
- Styling Spry menus
- Working with background images
- Implementing sprites
- Designing navigation with accessibility in mind
- Adding drop-down menus
- Developing graphical navigation with jQuery
- Creating pop-out vertical navigation
- Exploring CSS3 and HTML5 enhancements
Skill Level Intermediate
For some web sites, especially those for government and large corporations, it's important to differentiate between links to pages within the site and links to external sites. In this video, I'll show you how to set up a single CSS rule that can add an identifying icon to all your external links in one fell swoop. The icon we'll be using is one that has gained a good deal of acceptance on the web, from Wikipedia to the Federal Health and Human Services web site. You can find it here on WIKIMEDIA COMMONS, and it's this icon here that we see in a larger version.
And we're going to be using one of the smaller varieties. So let's go back to Dreamweaver. And here I have two links that actually go to external sites: this Take the tour and a little bit further down, Check 'em out. So I want to add a CSS rule that looks at the value of the href attribute, and if it starts with an http, then apply this rule. So let's go ahead and go to Split view. And I am going to go ahead and put this in the main.css. I'll put this down at the bottom.
And the CSS rule that we're going to adopt is starting off with the anchor tag, and then you use square brackets whenever you're trying to reference an attribute within a tag. So I'll do an opening and closing, just to make sure we have that. And we have to look for the href attribute. And now we need to put in a caret, which is Shift+6, and then an equal sign. The ^= sign is an advanced selector used in CSS3 that says just look at the beginning of the value for the attribute.
And what we're looking for is http, and then I'll close that. Notice that I didn't do http://, even though that would be valid for a number of sites. I initially stopped at the p in order to also encompass https sites, which are secure HTTP. All right, we have our selector, so I'll do my opening and closing curly braces. And now we're going to put in a background tag. So this is background: and then double-click on URL to open up the Select File dialog box.
And we want to choose this from the Chapter 6 > 06_02 > images folder. And you're looking for a file named external_link.png. I'll click Choose here and then enter in no-repeat. And we want to center this on the right of the link. Close off that declaration with a semicolon. And then let's add just a little bit of padding on the right in order to allow room for the icon itself. And the icon is about 12 pixels wide, so we'll just do 13 here to give us a little bit more room.
So now, when I go to Design view, you can see that I have my icon appearing right where it says Take the tour. And if I go down to Check 'em out, there is the other icon automatically added to any external link. Sweet! So hopefully this tip will come in handy when you land that lucrative government web design contract.