Learn how to change links through this thirteenth video of a beginner's guide to HTML and CSS!
TRANSCRIPT:
You might remember in a previous video that we changed all the text in this one webpage to the color green. And we did that using this CSS right here: so we targeted the body of the document, and then using the color attribute, we changed all the text to green. But you’ll see that when we run it, our link here is the only thing that’s not green. It’s kind of a purplish-blue, so in this video, I’ll show you how we can change the color of links. So, this is the one link that we have on our webpage. Here it is, and we need to target this, so we first target the anchor tag using a. And then, to change the color of it, we go “:link”. And then we can open up those curly braces. Now here, we can change the color so it matches the rest of the webpage. So we can go green. And then there’s also three other pseudo-classes in addition to a:link. There’s also a:visited, which basically means you’ve already clicked on that link. Once I click on this, you’ll see that the color hasn’t changed. But you can change it so that the color changes after you’ve clicked on it. So let’s change the color to blue. And then, let’s make another color for when you’re hovering over that link. So let’s use a:hover and make the color red. And the last pseudo-class I’m going over today is a:active. So active is when you’re clicking on the link. So when we’re clicking on it, let’s go with yellow.
So now let’s save it and run it again. Now you can see that the link is blue like we’ve said here, because we’ve already visited it. And then when we hover over it, it’s red. And once we click it, you’ll see that it’s yellow. See? It turned yellow in that one second when we clicked it.
Негізгі бет Styling Links with Pseudo Classes
No video
Пікірлер