Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
Having your links respond to user interaction is an important part of site navigation. In CSS, we use pseudo-class selectors to style the various states of links. Let's go ahead and explore each one of those, and I'm going talk about some of the things that we need to keep in mind while we're using those various links states. So in this particular exercise, I've opened up the states.htm from the 02_03 directory, and I just want to show you some of the page structure here before we begin working on this. If I scroll down into the actual HTML code, I can see that I have a list of links on the page.
The very first link has an ID of anchor but no href attribute. All the rest of them do have an href attribute, but the first three go to visit.htm and the second two just kind go nowhere to the little period link there. Now each of these is going to help me illustrate these different various link states. If I go ahead and open up this page in a browser, you can kind of see what's happening here with the browser's default styling. So we have an anchor element with no href that gets no link styling whatsoever and then the rest of the links get that sort of default_blue line.
Well, what's going on there is the browser default link styling doesn't actually apply to global anchored element. It applies to anchor elements by using the link pseudo-class selector. So, essentially link is going to target any unvisited link that also has an href attribute, and in this case, we're getting the browser's default styling. Well, you can control the browser's default styling by writing your own pseudo-class selectors. So what I want to do, I want to go back in the code, and I'm just going to scroll up, and first thing I want to do here is just write a global link style and show you the difference between these pseudo class selectors in a global style.
So if just do an anchor element, and I come in and I say, okay, I'm going to change the color to say #916226 and then set the text decoration to none and then save that and go back into my browser and refresh the page, now that color which is sort of this darkish, brownish- orange color applies now to every single anchor element, including the anchor element that doesn't have the href element.
We're overriding the browser default link styling, which is kind of what we're going for, but there is an unintended side effect of this. You'll notice, for example, that when I click on a link and then hit the back button, I'm not seeing any default visited styling. I'm not seeing the underlined purple linked that maybe we're use to seeing when we look at visited links. Now that's actually a good thing. Sometimes you want to get rid of the visited styling and sometimes you want the visited styling. When you write a global link selector the way we just did where you just use the anchor element and nothing else, that's going to overwrite any default styling, including the link and the visited styles.
Now if you do want the visited styling back, it's easy enough. All you have to do is go back into your styling and change that from a to a:link. So now when I save this and I go back to the page and I refresh the page, you can see what happens here is we get that sort of default color that comes back. The text decoration is still off, and what that does is it tells us something very important about visited links. A lot of people used to put out tutorials all the time that showed you how to create really fancy visited links, little check boxes, or graphics on them and all sorts of things.
Well, one of the things that we discovered over time was that the visited links actually caused a little bit of a security hole in our browsers, because it would essentially expose your browsing history to whatever web page you are currently on, because it could look at all of your visited links. So they plugged that hole, and one of the things that they did when plugging the hole was also eliminate a lot of the styling options that you had for visited links. So right now, currently the only styling option that we have for visited links is to change the color. Now you can also change background, and I'll show you what I mean by that as we go in and go ahead and create a visited pseudo-class selector as well.
So let's say that the purple color that you were getting there really doesn't fit what you need for your site. So I'm going to come in and do a:visited. Now, whenever you are doing these pseudo-class selectors, you'll notice that there is no space between the pseudo-class selector and the element that it's applying to. You can apply a lot of these pseudo-class selectors to elements other than links, but since this course is focusing on navigation, obviously we're going to focus on applying these pseudo-class selectors to links. For the a:visited, I'm going to come in, and I'm just going to choose, let's say a color of #687D8D which is sort of a desaturated bluish color. It's a contrasting color to the link color, and it's desaturated, which is what I really to do with visited links.
I like to make them the inverse color of the active links and then desaturate them a little bit as well. I find that really sort of gets to point across that you've been there. So if I save this and refresh the page, now you can see that our visited links are sort of that desaturated blue color which gives a nice indication of pages that we visited and pages that we haven't. I mentioned sort of limitations that we have with visited styling for example. If I wanted to bring text decoration back for my visited links, I really wouldn't be able to do it. So let's say I just said, hey, I want underline for my visited links.
If I come back in and refresh the page, no underlines. Now the only other thing that you can do is you can apply a background color to visited links, but there's a little bit of a catch to this. So let's just say I do a background something really garish that will stand out, let's say yellow. All right, so if I save this and preview it, no yellow background. However, if your global link styling does have a background, then the visited is allowed to change that, so if I come up and let's say I have a background applied to just the basic links, let's say I do something again equally garish like red and preview that, now you can see the yellow is showing up.
So you can do background colors with visited links, but the parent link selectors have to have a background applied to them as well. Okay, I'm going to save that, and I want to move on to our next one and refresh this page, which is hover. Now the hover pseudo-class selector is going to target any link that's currently being hovered over. So if I go down to the line right below that and type in a:hover, I can change kind of really anything I want to do here. Now the hover pseudo-class selector, I'm betting a lot of you guys have already used. This is certainly the most widely used probably of all the pseudo-class selectors because it allows us to create rollover, so it's very, very widely used.
So, over this one, I'm just going to go ahead and do a color of D5973C, which is a much brighter orange than the default color of the links, and then I am going to bring back the text-decoration on hover. So I'm going to do text-decoration underline, bring that back, and save my styles. So now if I go back to my browser and refresh, initially I don't really see anything, but as I start to hover over my links, I can see the rollover we've created. We are changing the color, and we're applying the underline now. Now, one of the things you need to understand is this works now with every single anchor element, not just the ones that have an href applied to them.
Now that is something you are going to need to think about if you have anchor elements on the page that don't have an href attribute, for whatever reason you might have that. The order of these does matter, if you're wondering does it matter which order that you do these in? Absolutely it does. You'll notice that right now if I hover over visited links, I get the full hover styling. However, if I move this hover--let's just say I cut this, and I move this to where it's a above the visited, I am going to save this and go back into my browser and refresh-- you'll notice that the color doesn't apply.
Now the underline does, and that's simply because there's no conflict there, the visited links don't allow an underline, so underline goes and shows up. But where there is a conflict, the color is not being replaced, that is everything to do with the cascade. Remember, the cascade says the last style applied wins. In this case, the visited color is going to win over the hover. So if you want the hover to apply over visited, you've got to remember to put the visited first, and there's actually a little memory device that you can use for that, and it's called love-hate, LVHA. The LV stands for link and visited, and the HA stands for hover and our next pseudo class selector class, which is active.
So if I go down to the next line and do a:active, I can set that one as well, and this one for active, I'm just going to do an outline, and I'm going to do a 0, and that's going to basically turn off any default outline that a browser might have for active links, and then I'm going to set the background to yellow. I was so enamored with that yellow background I did a second ago that I just can't get away from it. So now I'm going to save that and refresh my browser. Okay, so what is an active link? Well, an active link is a link that the user is actively interacting with.
So if I go to one of these links and click and hold the mouse down, you can see that now the yellow background shows up, there's my active link. Now, most of the time you'll barely see it, it'll just flash, and it'll come back. However, if somebody places and holds the mouse down or if the link is active for any length of time, that's going to show up. So it's going to be some pretty specific styling instances, but you may need that styling. It's nice to know that you can do that. Now a lot of times, people will combine these. They might see the a:link and the a:visited be exactly the same if they wanted to do visited styling. You might see the hover and the active be exactly the same if they don't want that sort of flash of text.
By the way, the default browser styling for active, sometimes it's an outline, sometimes it's a color change, so those are all things that you need to think about as you're styling that. Now, the very last one that I want to take a look at is focus. Now, we talked about focus a little bit in our last exercise. So let's just go ahead and finish up our styles by doing another bit of focus styling here. I'm going to do a and then focus and then for our focus I'm going to do an outline. Now remember, most browsers do a default outline, but I'm going to change their default settings, and I'm going to do like a 2-pixel solid outline, and I'm going to make that outline red.
That'll be very easy for me to see. So if I save this, I can go back into my browser and refresh that, and it's very easy for me to see the focus styling at this point. Now remember, we could tab though our links, we are focusing on those links, and so we get that sort of bright red outline. But a lot of times you've got to remember that your writing here is going to be combined. If I go to one of these links and click and hold the mouse down, you'll notice that not only is the link active, but I've also established focus on it, so it gets both of those sets of styling. So that is also something that you're going to need to think about as you're authoring those styles.
We went over a lot of these guys, and we did a lot of different combinations. For the most part, you're probably just going to use a combination of the basic link styling and the hover styles. A lot of times I won't even do link, I'll just do an a like a global anchor element and then do a hover as well. But it is really useful to know how the other ones such as the visited, the active, and the focus pseudo-class selectors work. If you know how those work and how they interact with each other and what their limitations are, that's going to give you even more flexibility when styling your site's navigation.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.