Join Bill Weinman for an in-depth discussion in this video Formatting links using pseudo-selectors, part of CSS for Developers.
You will notice in your Links folder in the Exercise Files that there is a beginning and ending place for the CSS and HTML files. So there is begin.css and begin.html and end.css and end.html. The ending places are where we end up at, at the end of this chapter and the beginning places we are just going to take those and copy them and name them main.html and main.css, and use those to work in as we get there. So I am going to go ahead and copy this and rename it and then I am going to copy this one and rename it, and I will open that in the text editor and I will go ahead and open this one also in the text editor, just drag that in there and also open it in the browser.
That's what it looks like in the browser and in the text editor. Now you will notice that this is just our normal file that we have been using throughout the course. I am going to go ahead and put some links in here at the top. Now I am going to put in an unordered list for the links, and the reason for that will become clear later. We are going to use it that way in another movie. So there is the link and I will copy and paste that so we have three links and I will just name them That and Other, and for the purposes of demonstration, I'm just going to go to my website and another place on my website, and maybe lynda.com.
All right, so if we look at this in the browser, it looks like that. We have an unordered list with bullets and the links. For now we are just going to look at the links themselves. So you will notice that these three links are all formatted in blue and they are underlined, just like you expect links to look in your browser. This is the default formatting for links in most browsers. If I click on one of these links and then come back you will notice that it's now the visited color, which is sort of this purplish color in this browser.
You will also notice that if I click on it and hold my mouse down but don't let go off the mouse button that it turns red. That's the active formatting. So there are three different formattings. There is unvisited, visited and active. I pulled the mouse away while the button was still pressed so that it would stay in that state. If I click here you will see that it goes back. So that's important because when we go and start using the pseudo selectors we can format the links in their are unvisited and visited and active states. So let's go ahead and format some links here in CSS.
We are just going to come down to the bottom and format the link by itself. So this formats all of the anchor tags and I'll say color is's red and save that. And so now, they are all red because they are all anchor tags, and they are red all the time. And I might say text-decoration: none. This is a very common thing to do to get rid of the underlines and so now they are not underlined. My mouse still changes when I go over them. See that? Now a lot of times people will want to put the underline back on perhaps, just when you are hovering the mouse over.
So for that I use this pseudo selector, :hover, and that's a pseudo selector and that will select the anchor tag only when it's in its hover state. And I will say text-decoration: underline. And so now when I come up here, I just save and reload it, you'll notice that the underline appears when I move the mouse over it. So that hover state is true when the mouse is actually hovering over the link.
See that? I can also format it separately for both the visited and unvisited state. So if I say a:link, that's actually the unvisited state and say color: blue, and now the unvisited links are blue, but the visited link is red. And so I can do the same thing for the visited state, and I can make that one purple, and so there is that purple color that we normally associate with that.
And you will notice the active state when I am clicking on and holding the mouse button down and I will pull the mouse out of the way and release and we'll see that's not changing because we don't have a separate formatting for the active state. But I can format that here. I can say a:active and I can make that red. And there it is. So now we have them formatted pretty much back how they were, except they don't have the underline except when the mouse was over them. You will notice that the default coloring here is just never actually getting used because I have link, visited and active, all have their own colors.
So that is in a nutshell how you use the pseudo selectors that are associated with an anchor tag for formatting links on a webpage using CSS.
- Adding borders and backgrounds
- Choosing fonts
- Changing the color of elements
- Working with sprites
- Positioning with CSS
- Creating a menu bar