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