How to Style HTML hypertext links in CSS with visited, hover, active and focus

[@DaveGrayTeachesCode]

Hypertext links have default CSS styles, but most designs change those default styles to incorporate different link states including hover, active, visited and focus pseudo-classes. In this tutorial, you will learn how to change the hypertext link styles in your projects to match the color theme of your website and provide users with more feedback. If you are just getting started with CSS, I recommend going to the beginning of this CSS for Beginners playlist: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@alirezahekmati7632]

hello! just find your channel from the advanced javascript concept and its Amazing! came to your recent post to say your content is GOLD its way better than 99% of the information you can find on youtube please keep posting new videos we need you here! you can directly impact our life by helping us consume quality content.

[@DaveGrayTeachesCode]

Thank you! 🙏

[@theexile4694]

How can I do this and have different links with different color schemes? Scenario: I have a header with some white text in it, however it has some links. When I change the a:x values to match, it looks great in the header but, now my links in the body are essentially invisible. Can I create a custom class for these changes or I can only use the root pseudo class to make the changes?

[@ScriptRaccoon]

11:10 When I want the links to have the same color as the text, it is good practice to say "color: inherit". This way, you don't have to adjust your font color in two places in case you want to change it. This is because the links simply inherit the font color from the container.

[@DaveGrayTeachesCode]

Great tip! I'll eventually get to themes with variable values, too.

[@aragorn2753]

I just want to say that this is the first time in my life where i am in a rabbit hole of watching a series of tutorials from the same channel Thanks dave your tutorials are straight to the point and those extra information that you say in your tutorials are gold ❤

[@DaveGrayTeachesCode]

Thank you!

[@kartikarora3521]

Thanks a lot, this was really helpful. I already know CSS, but styling links is always a pain. I want to improve my knowledge of CSS, but I procrastinate a lot, but this video has helped me a lot. The other things that I struggle with are Form Styling, Animation, flex-shrink, flex-basis, grid-auto-rows. I'll be waiting for those tutorial in the series. Thank You!

[@DaveGrayTeachesCode]

You're welcome, Kartik! And you mention good topics that should be coming in the series. 💯

[@Grihlo]

Thank you Dave!! Another cool way to highlight the hovered link is text-shadow. I completed one long video about HTML CSS and there was no information about the importance of the order for pseudo-elements and ancor element. Your explanation is really great and fundamental.

[@DaveGrayTeachesCode]

You're welcome! And great note! 💯

[@vanessakimana3929]

Thanks for these CSS series, your explanations are great and I believe it gave me the foundation I needed. Dave you rock, keep on the good work.

[@DaveGrayTeachesCode]

You're welcome! I will keep adding to this series too 🚀

[@user-vatican]

Thank you very mutch dear Dave for your teaching, after your classes i know more about css.

[@GabrielSouza-yy2rq]

Its so great how you keep introducing new concepts as you show how they work simultaneously. It makes things so easy to understand and learn. I'm really thankful for your effort!

[@DaveGrayTeachesCode]

You're very welcome, Gabriel!

[@elvispontes4165]

You are the best teacher on youtube, hands down!!

[@DaveGrayTeachesCode]

Thank you!

[@ruslangilyazov7733]

Thank you, Dave👏

[@robinheyer708]

Thanks, Dave, for another great tutorial! Using HSL for links is very handy! I like increasing the last value by 20-25% to make it look like they're lighting up. (Opacity: 0.7 is actually quite similar) I was very disappointed that my (not so user-friendly) idea is not possible. Just like we see in the video I wanted to make the links the same color as the rest of the text but show them as italic (and maybe a bit bigger) and then have the visited links show as normal text but there's some security built into what can be changed in visited links according to MDN. Had me wondering for a while if I hadn't understood specificity, though!

[@DaveGrayTeachesCode]

Yes, there are a few exceptions and it sounds like you found one! Thank you for the kind words! 🙏

[@TravinskiyVladislav]

Thank you, Dave

[@abdoulie1027]

Keep up the good job ❤

[@DaveGrayTeachesCode]

Thank you!

[@iambrijeshtoo]

Thank you! ♥

[@DaveGrayTeachesCode]

Welcome!

[@stormbytes]

Some really great tips here!

[@DaveGrayTeachesCode]

Thank you!

[@williammckeever4790]

Very informative series. Enjoying it a lot. Have you tried the live server extension from Microsoft yet? I just installed it and it actually has some nice features, like embedded preview, updates as you type without saving including css. Seems very stable too. Worth taking a look at in my opinion.

[@DaveGrayTeachesCode]

Not yet! Thank you for letting me know! And I'm glad you are enjoying the series. 🙏💯

[@Knards]

Thanks Dave!

[@DaveGrayTeachesCode]

You're welcome!

[@IG7799-c4u]

Hi Dave, just a quick question at 10:30. You mentioned that putting the focus pseudo selector with the hover will increase accessibility to those users using screen readers, but why would that be the case? Since it makes the colour change for each link when it is put into focus, how will that benefit somebody who, I assume, cannot actually see the screen itself?

[@sonamohialdin3376]

So good tutorial thank you

[@DaveGrayTeachesCode]

You're welcome!

[@jorbitmultimedia]

how to change each of them separately,,,,am having a trouble in classing each of them

[@cesmorf5398]

In your opinion, a newbie should start a career with front end or backend is best ?

[@DaveGrayTeachesCode]

Other opinions may differ, but I think frontend is the place to start. You should learn the 3 pillars of web dev which I consider foundational knowledge: 1) HTML, 2) CSS and 3) Javascript. This is all runs in the browser. I think it would be difficult to understand how a server (backend) interacts with a browser (frontend) if you weren't knowledgeable of those basics.

[@cesmorf5398]

@@DaveGrayTeachesCode thanks

[@anubhavsingh176]

html completed css 7th vedio from web d playlist

[@elric7371]

Really good series Dave. What are the topics that still remain? and when styling when do you choose to use a div or say a already defined tag(p,header etc)? thanks

[@DaveGrayTeachesCode]

Thank you and great questions! There are a lot of topics yet to go in the CSS series. As for div usage, I always try to use a semantic element first. If those don't make sense, then I will use a div. An overview of semantic elements here: kzbin.info/www/bejne/oYmWhZmaitajq7c

[@elric7371]

@@DaveGrayTeachesCode Thanks that clarified it for me . Looking forward to the rest of the series. Appreciate your hard work.

[@raiappan1951]

Professor, please make videos on data structures and problem solving in javascript.

[@DaveGrayTeachesCode]

Thank you for the request! 🙏

[@yatin1370]

Hi Dave, I have a doubt at 7:58... CSS file is saved and text-decoration is 'none'. How are the links underlined still?

[@DaveGrayTeachesCode]

Notice when I save the file just after that, the lines go away. I don't remember every detail of this (or any) video but this could just be a slow / late refresh from live server.

[@biljanakotev1102]

Is it best practice to use all a link states

[@ifeanyiuche4064]

I am finding it confusing understanding why you use rem and em instead just px or %. Do rem and em does entirely different things?

[@DaveGrayTeachesCode]

I'm going to suggest you go back to lesson 4 in this series that covers Units & Sizes where your question is explained: kzbin.info/aero/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

[@datboimo00]

hey i just want to ask you how do i make different hyperlinks to have different styles?? pls this is urgent

[@DaveGrayTeachesCode]

You are watching the right video to learn how.

[@dharmeshgohil9375]

can you teach step by step how to made website responsive it will be great help i feel difficulty there

[@DaveGrayTeachesCode]

This series will get into responsive design basics before it is complete. 🚀

[@biljanakotev1102]

Is it best practice to use all a link states all the time?

[@DaveGrayTeachesCode]

It is completely preference. You can just use the default styles for the link states, but most do prefer to change them to the theme of their website design.