New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Styling Navigation
Illustration by

Exploring link style considerations


From:

CSS: Styling Navigation

with James Williamson

Video: Exploring link style considerations

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.
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
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
Subjects:
Developer Web Web Design Web Development
Software:
CSS
Author:
James Williamson

Exploring link style considerations

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.

 
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.
Upgrade now


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 Upgrade now

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

Congratulations

You have completed CSS: Styling Navigation.

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


OK
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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

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.