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.
Site navigation is a critical component of any website, so it makes sense that you should put a lot of thought into planning and styling the links for your sites. So in this movie, I want to explore a few of the concepts that you should keep in mind as you're styling the links on your site, and what I'm looking at is the links.htm file which can be found in the 02_01 directory, and I've just opened it up in a browser. We're going to go through some of the points here and take a look at a couple of examples that I have built into this page. So the first thing that you want to think about as you are planning your links is the first point I make here, make them obvious.
And as I mentioned, it does kind of go without saying, links should be obvious, but as people begin to learn how to control different properties of links, they tend to start going away from the default aesthetic. Now the default aesthetic for links in most browsers is this, underlined blue text, we're all conditioned for that. When we see underlined blue text, we know instantly that's a link. Well, that's one of the first things designers want to change. They are like, well, this underlined blue text doesn't really fit into the style that I have designed for my site, so I need to change it, and that's understandable.
But what happens is lot of times when they change it, they don't make it obvious enough. Take a look at the paragraph below this where I'm looking right down here. So which part of this text is the link? When I hover over the word link, it's obvious that that's a link because the pointer shows up. But it looks exactly the same as text is emphasized. I've seen a lot of people do just that, they'll take their link text and they'll bold the font weight, but they really won't do anything else with it. And once you do that, it becomes really confusing as to what a link in your text is and what isn't.
You want to make it very obvious like the example right here at the back of this paragraph, you really want it to stand out and contrast from the text around it, and you want that styling to be unique, you don't want any other elements in the site to share that same styling, you want to reserve it just for the links themselves. The other thing that you want to do is really think through how you're using underlines in your site. It's very tempting to remove the underline from your links. It's certainly something that I do from time to time with my sites, but you want to be very careful about doing that. Again, check out this paragraph right here. I've got two examples. Which one of these is a link, the first, this one, or the second, this one? Visually we're going to take a look at the second one and just automatically assume it's a link, but in this case it's not, the first one is, so I've removed the underline from the first one, and then I've added underline text below that.
So if you are going to remove an underline, you need to have some other visual formatting that lets the user know, hey, this is a link, that could be highly contrasting color, changing the font weight, adding a background to it, something that's going to make it stand out within your design so that people know, hey, this is something that it's drawing attention to and then this is a link. Rollovers really help with that as well, and we'll talk about those a little bit later on in the title. The other flipside of that of course is you want to stay away from styling text that isn't a link in a way that makes a user think that it is.
Notice that I have a line right down here that says, "How frustrating am I? I looks like a link, but I'm not!!" I have seen people do this before when they are emphasizing text, they'll underline it or they'll underline certain phrases or titles of things, and when they do that, the user is going to automatically think, hey, this is a link, and I can click on it, and it's very frustrating for the user. They just assume that something is wrong with your site and they assume something is broke. So you want to be really careful about that. The next thing that I want to talk about is taking away the focus. Now there are a lot of different pseudo-class selectors in CSS that allow us to change how we format links, based on user interaction and one of those is focus.
One of the things that people typically do is they take away the focus styling of a link because aesthetically they just don't like it. So what is focus styling? Well, let me show you. If I go down to this link right here, that says, Colorblind Web Page Filter, when I click and hold the mouse down on it, you can see sort of that dotted red line that goes all the way around that. Well, if I let go of this and then hit the Back button to return to that page, essentially I've established focus on that link, and the default focus styling for browsers is that dotted box line you kind of see around it.
Well, a lot of designers don't like that. They don't like the way it shows up, they don't like the way it sort of sometimes reveals larger link areas than they are comfortable having just because of the styling they've done. So they'll find the focus pseudo-class selector, and they'll just remove that, they'll remove the outline from this. But that's a very bad idea, and it's a bad idea because it really dramatically impacts the accessibility of the page. Let me show you what I'm talking about. There are lot of users out there that can't use a mouse, and they'll use some type of user-agent or assistive device that allows them to browse the page without using a mouse.
And the keyboard is used a lot of times to tab through the links on the page and then select them. You'll notice, for example, if I click in the upper left-hand corner of this page and then hit the Tab key in my Browser, every time you hit the Tab key it's going to jump to the next link, so it's very easy because of the default focus styling of the page for me to tell when I'm going from one link to another. But if I go into the code of the page-- let's say that I write a selector that's going to takeaway that particular highlighting-- so let's say I use the focus pseudo-selector and I go into the outline property and I just set that to 0, which is essentially just going to turn that off, now if I save this page, go back into my Browser and refresh that, now if I click in the upper left-hand corner of the page, and I start tabbing through, even though I'm focusing on these different links, you can't tell, and anybody that's using that type of user-agent is suddenly going to have a very negative experience with your site because they can't tell where they are looking at.
If you want to change the styling to something that's a little bit nicer or something that fits the site a little bit better, there is nothing wrong with that. I could come in for example and just 4-pixel solid red. So styling an outline is almost the same as styling a border, for example. Now if I save that and preview my page again, as I tab through my links, notice that I'm getting considerably more dramatic styling based on the properties that we changed there in the focus selectors. So you are free to alter those or change them in some way that fits the design styling of your site, but don't remove them entirely.
I've seen a lot of people do that, and there is a lot of CSS resets out there that will remove that focus styling, you've got to remember to put it back in so that any people browsing your site using some of those assistive devices is going to be able to tab through the links on your page, so it's really, really important. Now one of the last things I want to talk about is the contrast of the links on your page. A lot of people lose site of the fact that large percentage of the population is colorblind or has some form of colorblindness. So choosing colors for your site is more important than you think. It's more than just conveying emotion.
A lot of times it's making sure that people can read your site properly. So you want to make sure that all of the colors in your site have a proper amount of contrast, but that's doubly important for links. So I have added a couple of resources here that you can take a look at. The Colorblind Web Page Filter, Vischeck, and the Color Vision Testing, these are great resources for learning a little bit more about colorblindness, like the Colorblind Web Page Filter, for example. This site will allow you to type in a URL, and let's say I'll just go ahead and do lynda.com and then fetch the site, and it'll present a site to you as if it were being viewed by a certain type of colorblindness, and you can choose from this filter right here which colorblind test you want to run on it.
And it's going to give you a nice little snapshot of your site with a filter applied to it, that's going to simulate that colorblindness effect. It's not going to be entirely accurate, and there are other filters that you can run on this for different types of colorblindness. It's a nice way of checking your progress and making sure that the colors that you're using on your site and the contrast that you are using are acceptable within certain ranges of colorblindness. So it's definitely a resource you want to bookmark and check as you are developing your sites. And the last thing I want to leave you with is just to keep it simple. Now I know you hear that all the time, the K-I-S-S, you know, KISS, Keep It Simple Stupid, that's absolutely accurate.
As you're working with your links, the simpler you can make your link styles the better, as long as you've got enough contrast and enough stylistic formatting or at least unique stylistic formatting to let the user know that this is a link. Now I've listed some properties here at the bottom of the page that are typical of link styling, background, border, color, font weight, font style, and text decoration. Now, you can certainly modify more styles than that when you are creating your links, but that's really sort of the bread and butter of most link styling. So if you stick with those properties, and you really work with them to make sure that you've got the proper contrast, and that you've got unique styling defined that really identifies the links on the page, then you are definitely going in the right direction.
I know it seems like I went over a lot of information there, but you know, often it's the simplest things in your sites that require the most planning. Good user experience requires links that are simple to identify, that remain consistent throughout the site, and aren't going to confuse your users as to their purpose. Just keep those concepts in mind as you begin styling links in your own sites.
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.