CSS: Styling Navigation
Illustration by John Hersey

Using global link styles


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: Using global link styles

Let's take the styling considerations that we covered in our last exercise and put them into practice as we set the basic link styles for a site. Now obviously, every site is different, and it's going to require its own individual link styling. But let's take a look at some of the global styles that you might want to set on all of your links. So I have opened up the global.htm from 02_02 folder, and I have it open right now in a browser. Now, usually it doesn't matter which browser that I use. In this case, I am using Chrome because there is something that I want to illustrate.
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

Using global link styles

Let's take the styling considerations that we covered in our last exercise and put them into practice as we set the basic link styles for a site. Now obviously, every site is different, and it's going to require its own individual link styling. But let's take a look at some of the global styles that you might want to set on all of your links. So I have opened up the global.htm from 02_02 folder, and I have it open right now in a browser. Now, usually it doesn't matter which browser that I use. In this case, I am using Chrome because there is something that I want to illustrate.

And we talked about the focus pseudo-class selector in the previous exercise and how each browser has sort of default styling for focused links. I also talked about how you don't necessarily want to remove the focus styling because people with assistive devices or that are browsing your site using the keyboard need to know when they have established focus on a link. Well, most browsers show links focus by using that sort of thin dotted outline, but not Chrome as I tab through. See, Chrome has sort of a highlight around it and sometimes it's blue, sometimes it's orange, it uses the color scheme of the page itself to determine really what that should be.

That's beautiful, and it's nice, but it's not consistent from browser to browser. So lot of people like to take that focus pseudo-class selector in as a global link style, go ahead and just apply sort of default styling for it. And so that's the first thing that we are going to do. So I am going to switch back to code editor, and here I have the global.htm file open in it as well. So I've got some basic styling on the page here, and I want to go down to about line 34 in my CSS, and I can find my global link styles there. So I am just going to click inside of that, maybe create a little extra space there.

And the first thing I am going to do is set my focus pseudo-class selector for links. So I am going to do a:focus. So anytime you're doing a pseudo-class selector, it has a colon between it, and you don't want any space between the anchor selector and the pseudo-class selector. All right, after that I am going to go ahead and close my curly braces. I like to do that just so I don't forget to close it again. And the property, I am going to change here is outline. Now you may or may not have used the outline property before. Most people use border instead of outline, outline had some really sort of wonky support issues in older browsers, but the interesting thing about outline is unlike border it doesn't affect box model value, so it doesn't really affect the overall width and height of an element the way border does.

So outline is kind of interesting in that sense. In this case, I am just going to set it to thin and dotted. So that's going to be that thin dotted line, and it's going to be consistent in all browsers. All right, so if save the page, we go back into my browser and refresh the page, now if I click on the page and start tabbing through my links again, now you can see that I am getting that sort of thin dotted line which is going to be now consistent in every single browser and user agent, which is kind of what I am going for when I am setting global styling. Now the next thing I want to do, I want to get back into my code, and I am going to set of another set of global styles for a couple of pseudo-class selectors.

So what I am going to do is I am going to go in, and I am going to do a:hover, a:active. Now, these are going to be setting some of the various link states, we are going to talk more about those link states such as hover, active, focus in the next exercise. So, right now just kind of focus on the fact that I am setting some global styling for links. And what I am going to do here is I am going to set outline to 0. Now just as browsers have a default styling set for focus, they also have some default styling set for active links as well.

And they use that same sort of dotted outline around that. Well, a lot of times that doesn't really fit sort of the stylistic purposes of your site, and if you're wondering what the difference between active and focus is, let me show you really quickly. Let's say instead of this thin dotted for example, for active, I did something maybe a little bit more dramatic. Maybe I set a background property for that. I am just going to set background to like yellow. So it's really, really noticeable. All right, so if I go back in to my browser and refresh that, again, if I am focusing on a link, notice that as I tab through it, I am establishing focus on a link.

But an active link gives you feedback as to what the current active link is. So I hover over a link, notice that I am getting the yellow there because of the hover. But if I click on that link and hold the mouse down, I also get a yellow background as well, and that is your active link. That's difference between active and focus. I am going to go ahead and delete that background because that is not something I want for the global styles of my links. Those are two little things that I do on pretty much every single site that I design. I go ahead and set my outline to be consistent on all of links that have established focused, and then I remove it from hover and active.

And that allows me later on in my code to go ahead and set either active or hover styling that better suits what I want for the design of the site. So really, I am just sort of establishing a baseline there for those. Now, the next thing I want to take a look at is just the basic default link styling. Now, everything is purple right now because I have already clicked on a couple of these links. But basically, I am letting the browser control the formatting of the links right now, and that's giving me the underlined blue links that haven't been clicked on and the underline purple links for the links that have been visited.

Now we will take a look at controlling the states of those links in our next exercise, but for right now I just want to focus on sort of the default link styling itself. So if I go back into my code, I am going to go ahead and set a global style here for all links on the page. So I am just going to use a very basic element selector. In this case, the anchor selector. So just an a selector here. And now any property I set on this is going to apply to every single link site-wide, that's what I mean when I talk about setting global styling. So for here, I am just going to change the color away from that blue color.

And in this case, I am going to do a #49A3B2, which is kind of a teal color. Then I am going to set font-weight to bold, and I am going to turn text-decoration off by setting it to none. So think about what that's going to do for our links. It's going to change the color of the links from that sort of default blue color to a teal, it's going to change the weight of the text of any link regardless of where it's found to bold, and then it's going to set the text-decoration to none, which is essentially just going to remove the outline.

So if I save that, go back into my page, and refresh the browser, you can see that it did that for all the links on my page. So now I sort of have bold text, there is a teal color which is a nice contrast, it works for headings, and it works inside the body copy itself. And you will notice that it applies it everywhere. Now while that sort of teal color might work very well in this body copy here, that sort of is on that white background. Now the contrast here over here in the sidebar and down here in the footer, which is sort of in this brown background, might not quite be good enough or it might not be really what I'm looking for.

So when you're setting global link styles, don't worry about it working in every single instance. What you are sort of looking for is a baseline of your style which you can then go in and modify in specific regions. To do that for example, if I look to my code, and I look down here to the sidebar, I can see I have an aside with an ID of sidebar. Now you can see my footer has an ID of page footer. Well, I can use those attributes to target those specific regions and change the global link styling that I just set. So if I go right down below this, I can write another selector that says #sidebar a, #page-footer a.

So that's essentially using a different selector to say, hey, any link inside the sidebar, any link inside the footer, let's change that styling. And the only property I am really going to set here is color, and I am just going to set the color to white. Just going to give you more contrast on that brown background. So if I save that and refresh it, you can see now that I've got more contrast against the black background, but another problem has reared its ugly head. It's very difficult to tell in this text now what's a link and what's not. So while I have nice contrast, very unique styling over here in the body region, over here on the side bar it's not so nice.

Now I could certainly go ahead and reestablish the underline over here and not have it here, but I'm not a big fan of removing the underline in one region and placing it in another. So maybe a better solution in this case is just to go back to my default global link style, remove the text-decoration of none and allow the underline. Now when I save and test it, it's a little bit easier to tell when I have links in the sidebar and the footer now. And now I have the underline in the body copy as well, which really isn't hurting anything. It may be not just exactly the result I am looking for.

So in a lot of cases, you're making trade-offs, and you have to decide whether or not you want your link styling to be really consistent across the site or very different between regions on the page. The only person that can really make that determination is you. As you can see, even though we're not really kerning anything that's terribly complex, our link styles are pretty simple, you start having to make some complex decisions about how you can reformat links in your page really early on in the process. So that's definitely something that you want to sit down and plan through as you are mocking up your site before you start writing the styles for it.

You want to write these global styles to be as efficient as possible. Now, I am not really recommending global style links that are going to be consistent for every single site. The only thing that I really recommend that you do for every single site are these guys right here, where you're setting a consistent focus, style, and you are removing the outline for hover and active which allows you to go back in and re-style that the way you want that suits your site. But rather, what I'm saying is, is within your site you are going to want to set global link styles that really fit the style and the design of the site that you're working on, that's going to create basic project-specific global link styling, and it's going to allow you to broadly style your links in your site that you can then override when you need to.

Not only is this a really efficient way to work, it's going to help you understand what type of styling is required to create a consistent user experience throughout your site.

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.