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: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
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.
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?
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.
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!
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.
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?
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.
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!
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 ❤
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.
I'm going to suggest you go back to lesson 4 in this series that covers Units & Sizes where your question is explained: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
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.
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!
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
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: th-cam.com/video/kX3TfdUqpuU/w-d-xo.html
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.
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: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
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.
Thank you! 🙏
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?
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.
Great tip! I'll eventually get to themes with variable values, too.
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!
You're welcome, Kartik! And you mention good topics that should be coming in the series. 💯
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.
You're welcome! I will keep adding to this series too 🚀
Professor, please make videos on data structures and problem solving in javascript.
Thank you for the request! 🙏
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.
Not yet! Thank you for letting me know! And I'm glad you are enjoying the series. 🙏💯
Thank you very mutch dear Dave for your teaching, after your classes i know more about css.
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?
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.
You're welcome! And great note! 💯
how to change each of them separately,,,,am having a trouble in classing each of them
html completed css 7th vedio from web d playlist
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!
You're very welcome, Gabriel!
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 ❤
Thank you!
Hi Dave, I have a doubt at 7:58...
CSS file is saved and text-decoration is 'none'.
How are the links underlined still?
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.
Thank you, Dave👏
I am finding it confusing understanding why you use rem and em instead just px or %. Do rem and em does entirely different things?
I'm going to suggest you go back to lesson 4 in this series that covers Units & Sizes where your question is explained: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
hey i just want to ask you how do i make different hyperlinks to have different styles?? pls this is urgent
You are watching the right video to learn how.
In your opinion, a newbie should start a career with front end or backend is best ?
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.
@@DaveGrayTeachesCode thanks
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!
Yes, there are a few exceptions and it sounds like you found one! Thank you for the kind words! 🙏
Is it best practice to use all a link states
can you teach step by step how to made website responsive it will be great help i feel difficulty there
This series will get into responsive design basics before it is complete. 🚀
Thank you, Dave
Keep up the good job ❤
Thank you!
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
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: th-cam.com/video/kX3TfdUqpuU/w-d-xo.html
@@DaveGrayTeachesCode Thanks that clarified it for me . Looking forward to the rest of the series. Appreciate your hard work.
You are the best teacher on youtube, hands down!!
Thank you!
Is it best practice to use all a link states all the time?
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.
Thank you! ♥
Welcome!
Some really great tips here!
Thank you!
So good tutorial thank you
You're welcome!
Thanks Dave!
You're welcome!