HTML & CSS for Beginners Part 15: How to style links

Key Takeaways

hi and welcome to the next video in my series on HTML and CSS for beginners my name is Kevin and today we're looking at styling links so styling links gets its own video because it's a bit of a weird thing and I have to introduce something called pseudo classes pseudo classes are kind of weird but they're not that complicated we can delete this this is from our last video we're not using it anymore now if we look at this one what do we have I've just taken a very similar document to what we had in the last one but I've replaced our little spans with some links in here and I want to make these links look a lot nicer so if you remember well let's just look at one thing really fast I have my paragraph here and on my paragraph I'm going to change the color of it again let's just do color red so it really stands out the big difference that I'm making to it and all my text becomes red but my links don't my links stay blue and it's a really ugly blue the default and has that underline on there that isn't the nicest the main reason for that and let's just get rid of a few of these things here that I don't really want either and that last one we can keep all of my text changed to red but my my fonts didn't change my links didn't change to red and what that's kind of weird cuz my links are in my paragraph and I told you guys that when you style something that you know that style cascades down so when I changed this something in my body that would cascade down into the paragraphs and affect the paragraphs so how come when I change something on my paragraph it doesn't cascade down and take over in the links and the reason for that is the Cascade works as long as that thing doesn't have a style on it so for example when I change my body right now if I come up to my body and I changed this color to green and I can't spell but if I change that over to green and I save this doesn't become green so that style is cascading throughout but because my paragraphs have a specific color on them this color wins and well I've never told my links that they need to be blue the browser is telling them that the need to be blue it's a default style just like my paragraphs right now are not right now but before the last video my paragraphs there was space between them even though I never told them to have space there's a whole bunch of defaults that our systems have or the browser's have and one of them is that links have to be blue and the only way we can overcome that is if we use the a tag so I'm going to select my a and let's do color let's just do it yellow so we see it change and now I see my links change and the underline of course changing with it so that doesn't look fantastic but at least it worked let's make them black maybe that might be nicer and this red that's try fire brick just so it doesn't look too ugly yeah that looks a little bit nicer so that looks okay I want my links to stand out and they're jumping out and I'm pretty happy with it but what if I want a hover effect a lot of places when you put the mouse on top you see the the link change and this is where we have to get into something called pseudo classes don't want to make it too complicated but a pseudo class it's a selector that we can do the selecting beat element in different states of being if that makes sense so just let's actually look at it for a second as someone new a I'm gonna put a colon and a merit hover and let's do a hover color yellow and again just so we can really see it refresh and now when I hover over so I bring my mouse on top its changing over to that yellow so this is the pseudo class of a so it's I have my regular link and then there's this special state of being for my link when my mouse goes on top it's a hover State so I'm selecting this class that only exists when I'm hovering my mouse on top of it so that that state of the link can come and go that's why it's a pseudo class and the color can change to yellow and you don't only have to change the color I could even say font font size 50 pixels and I could say font-family serif let's save that and refresh and please never do this on your site it's for just to show you that it works but that is the worst user experience in the world so don't do that but just to show you can change different properties for the hover effect so yeah we don't want to be doing things like that but I wanted to show you that you can now there's not only the hover State there's actually four different states there's the normal link state so this is just the default link so in its not gonna count for the hover or anything else only when it's a normal link that hasn't been touched or Harvard or anything I have my a link so my normal sort of default link e style thing my hover is when I hover over it how it's going to change another one I have is a visited and you've all seen visited link styles before especially when you're on google let's go over to google and just put in CSS font family to see I've probably clicked on things in here before you can see a few of these are in purple maybe you can see it um so Google does this where to let you know what you know that you've been clicking on things and what have you visited when haven't you visited you know because it's purple if you've seen it and it's not purple if you haven't visited so let's try this out and close that too let's give this a color of pink I'm gonna make my links that I visited pink so when i refresh this you'll notice they've all changed a pink and what happened there well because I just used dummy links and I've been I guess I accidently clicked on one before it said I've already visited this page in the past so all of my links changed so just to show you if I put in a link I haven't visited whoops that was right if I save that this will go back to black so the hover is still there and this is when a link I haven't been to and this is a link I have been to so that's the link I have visited and there's one last one and the last one is a div and we'll use another different color I have yellow I have pink I have black let's put in Luke we'll go back to the default link blue color the way the active works is I have my regular link I have my hover I have my visited so links that I've already been to and the last thing I have is my active and the active is while I'm clicking down on the link so I'm going to come off of that so when I click down it's changing and then when you let go of the mouse it goes away active States let's be honest most people click and it's finished that's it no click click click you can see it's flashing there because I have a really big difference between it are you usually gonna have a an active have you ever noticed that really my guess is no you can throw in in there if you want though I'm showing all four of them to you so something that's really important guys they have to be in this order and one of the reasons they have to be in this order is because the CSS is reading it in this order so it's gonna read my regular link first and make it black and then it goes oh it's not just a link though it's a visited link so it's going to overwrite that black and make it pink let's just say you decided to put your hover first so my hover is here and let's refresh my page and well why is my hover not working well what it's doing is it goes okay well when something's hover it when I have a link that's being hovered on top of I'm gonna make it yellow except oh that's also a link and my links have to be black or in this case my visited which has to be pink so whatever the case is these are coming after my hover so they're overwriting it because both of these links are both you know it's a hover link and well it's a link and this one here is and it's a visited link so it's doing hover and visited visited as second in my CSS so visited wins so it's just really important that this is the exact order you go in the same thing with the active if you do want an active when I'm clicking down right now whoops let's refresh when I'm clicking down right now it's active but I'm also hovering on top at the same time my mouse is hovering on the link it's on top of the link and I'm clicking so both of these two are you know they're both in play so it's changing it to blue but because I'm active this one here or because I'm also hovering this one here is winning because its second in my CSS so it's really important that you put all four of these in this order if you're using them all and if you're not using one well you can just you know leave it out and then it won't apply refresh and we can see my links are black you'll notice this has gone back to the default purple though because I don't have a visited color anymore so I could have the a link and my a visited color black and that makes them all black and the other option I have is just to put a here so my links I'm not worrying about the pseudo states of them I'm just saying all my links are black except my hover is going to overwrite that and become yellow so this doesn't worry about the pseudo states of them are the pseudo classes it's just covering all my bases and then I can overwrite any of the pseudo classes that I want with that how can we make our links look a little nicer a lot of people like getting rid of that line on the bottom so you can just come in and do a text-decoration:none and that will get rid of that line so in the last video we looked we have text decoration we have underline over line or the strikethrough and if you have one you want to get rid of like in this case you can just do a text-decoration:none and it will get rid of your underline and that's something that a lot of people like to do important though make sure your links do standout you don't want your links just to fade into your site um you need to make sure that people can see them so I like having hover States on them and I like making sure that the color or something about them stands out enough so people realize that they can probably click on them I usually don't do a really big hover like that though my hover will usually be something like I'm using black so let's just do like a 5 5 5 5 5 5 is like a little light gray so there's a difference but it's subtle but it's enough that you know the user will see a little flash of color they'll see that it is interactive I see the little hand icon there's enough things going on there that I'm aware that I can click on it whereas if I made this firebrick and I made this firebrick if all my text looks exactly that there's no underlines people won't know what they can click on there's also a focus which we might as well bring up since for accessibility purposes and I'm gonna do color let's just do yellow actually again just to highlight the difference and focus is instead of hovering on top some people will visit websites hope I never refreshed by pushing the tab button on their keyboard so you can cycle through your tabs you might be going not many people do that but some people with accessibility problems might not being able to use a mouse or for various other reasons they're not going through like this so the focus you can give it its own little look there and a lot of the time it will be the same as your hover so a nice little trick and something I haven't looked at yet is to select or have multiple selectors have the same property so I've made a hover I'm about a comma and then do a focus and they don't have to be on two lines I could write it like that if I wanted to but I just find it easier to if you have like four or five in a row sometimes so the comma separates them I can't use a space the space is something completely different we haven't got to yet but I can use a comma to separate and now both my hover is that light gray and when I tab through and I use my focus state that's also gonna be the same light gray so that's it for this video just a quick look at styling our links and the different things we can do with our links I hope you liked it I'm getting pretty excited because we're getting closer and closer to the end of this series it is getting we're starting to wind down as usual if you haven't subscribed yet please hit the subscribe button if you did like the video push the little like button and leave a comment below to let me know you liked the video I won't know you if you liked it if you don't let me know you liked it and until the next video have yourselves an awesome day