Styling links

- [Male Speaker] So you might be wondering why these links still are so stubborn even though we've changed the text color. Well, fortunately or unfortunately depending on your opinion, what we've got here is basically the links being stubborn. They want to look like links because they want to look clickable. If they were just white, they might not look like links. So what we need to do is, if we want to stand them up in a very particular way, we have to override this.

So the A tags by default have some default styles that we want to override. So the first thing we're gonna do is actually just change the text color. Now if we go back to our style lot CSS, how do we pick the A tags only? Well here's what we would do is pick the H1 tags only. We can do the same thing below this. So, underneath it what we're gonna do is add some space and then we're just gonna select any A tag. So, we're gonna do A and then a space.

The next thing you want to do is do something to these A tags. So to do something in CSS, we're gonna use curly brackets. Now, again just to add some space to make it easier to read, I'm gonna press return to open these up. And you can see here, we have a little smiley face. This selects any link. This selects html tags on index.html three times. We have three links on here. Perfect, this is ready to go. Same thing here, any H1 tag, just has one on index.html.

How do we change the text color? So by default, all of the text color is white, but because the browser is being stubborn and saying that A tags must look blue or must look different, we want to override this. So for now, what we want to do is pick a link color. So, let's just have a look. What are our link colors? Well they're also white at the moment, so we're gonna make the color of these equal to white. Now the white color that I've got is up here.

I can just take this hash ffffff and put it down here as well. So what I should get now is something that looks a little bit like this. I've got my links with this underline on here. How do I get rid of this underline? What is going on here? Well, again part of CSS is it gives us a lot of defaults in here. I can see a list of every single CSS rule that's ever possible, so in here is everything we can possibly imagine.

And again, just so it's html, we won't use all of this stuff. We only use maybe about 20 percent of this stuff. If I scroll down, so by default these links have text decoration, so if I click on this, we can see this is what the underline looks like. We can make it dotted if you want to or even red. What we actually want to do is just get rid of it completely by putting in what? Well, let's just see what we want.

We might want to use text decoration none. And again, if I go to the Superhi Editor, there's ways to kind of see this stuff. If I press return, still within my A and curly brackets, plus and there's a list of lots of things here. I want to use text decoration. I want to apply this, and what do I want to use? I want to use none. We could just write this out as well. Text, dash, decoration, colon, none, semi-colon, and what I'll see now is my links look like text.

But at the moment, if I just click through, those will kind of go to the next page. It just looks like text at the moment. Maybe I want to add some kind of hover state to this. How do I make this go pink when I move my mouse cursor over? We'll talk about that in the next video.