Hi my name is Dan and in this video were going to look at styling hyperlinks, now to understand how to style a hyper link we need to understand something called a pseudo it’s a fancy name it just means that this tag here, if I select it its called the a tag and that’s to do with my hyperlinks. Now the a tag has a couple of versions, one is called, the active link which is just sitting there. And theres another one, when I hover above it, theres a different style for not hovering and hovering over. And these are called pseudo classes it just means theres one here called, that one where nothings being touched is called link and theres a pseudo class called hover and theres a couple of other ones as well but those are the two main ones you’re going to use.

Now you need to style them in order, you need to do the link first and then the hover, otherwise they get a bit backwards and muddled up. The way I remember it is a way I've stolen from CSS tricks, where love hate is the easiest way to remember it, so you got link first and then hate. And its just an acronym to help you remember it. So lets do link first, to do it, I’m going to make sure I'm in main.CSS, I’m going to create a selector. I’m going to type in a and sudo class has a colon and you can see these are all the different pseudo classes so you can see here the visited ones, so you can have a different colour if the persons already visited that link and that gets used less and less. And there’s a hover one that I want, there’s all sorts of different ones. I want the one that’s called link, and I click enter and I would like to style the text and id like to make the text white. So all the links that I’ve got on my website are all now white, the next thing I want to do is do another pseudo class which is a:hover and I want to get rid of this white line underneath, the underline and I would like to change the colour of it. Lets do that by making sure were in main.CSS, making a new selector and this is a: and were going to use hover. And the hover one I want to do a couple of things, I want to remove the underline, which is appearing, you do that under this one called text and theres one here called text decoration and you can see this one here, the first one it says none. So I click that and theres no underline, gone.

The next thing I want to do is change the colour of it, I'm going to pick colour in here, click enter. I just picked a random colour and I want this to be my hover colour. Great so you just learnt what a pseudo class is, sounds fancy but really its just that there’s a tag which is called a and its got some extra little bits called the pseudo classes that we can style. Now we’ve styled our link and our hover and its kind of styled them all, so its styled this one and this one. Now if you want them to be different because theres going to be instances where you don’t want all the links to look the same, so down here we want to make this a little bit different. If I change this one, obviously theres a link here it’s going to change the top one. So what were going to do is were going to use a class, and were going to do a special thing with the class add a pseudo-selecter to it, so to do it were going to make a, main.CSS, were going to make a class and were going to call this one a footer link and were going to add this pseudo class afterwards. So were going to put in a colon and were going to put in a link. In this case, I just want to change the hover of it to make it look a bit special down the bottom, so I'm going to add the pseudo class :hover. Its always a little weird but remember it’s a very lower class and then the little pseudo selector which is our colon and then the hover.

So what I'm going to do now is change it to be, when it gets hovered over I'm going to change the colour to be red. So it just means down here now, nothings going to happen until I add my class. SO I'm going to add the class called footer link and I'm going to hover above it, it activates that pseudo class hover. And you could do it obviously for the link or the hover or any other pseudo selectors and go around and make lots of different classes for different kinds of hyperlinks you’d like to see. Alright lets do a save all, file, save all and move onto the next video.