CSS: Styling Navigation
Illustration by John Hersey

Styling link states


CSS: Styling Navigation

with James Williamson

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Styling link states

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.
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

please wait ...
Watch the Online Video Course CSS: Styling Navigation
5h 14m Beginner Nov 16, 2012

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.

Topics include:
  • Organizing menus with lists
  • Creating block-level links
  • Styling links, link states, and image links
  • Defining link dimensions
  • Controlling link spacing in a menu
  • Creating rollovers
  • Clearing floats
  • Indicating current pages
  • Controlling cursor states
  • Building dropdown menus
  • Creating CSS-only buttons
Developer Web
James Williamson

Styling link states

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.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed CSS: Styling Navigation.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.