Links

Quick reference

• 00:04 Okay, in this video, I want to talk about Links.
• 00:06 And CSS lets you do all kinds of things to links.
• 00:09 So, if we come back to our index page, I'm just gonna create a quick HTML link here.
• 00:13 And this is our link, save it, close it,
• 00:16 hit Reload it, we see that this is our link.
• 00:19 So, you can see it's underlined, it's blue if you click on it, it becomes purple.
• 00:24 And I just pointed the link back to our page, so it doesn't actually go anywhere.
• 00:27 But that's a basic link, now we can change this with CSS by,
• 00:33 just tab down here and create another thing, a open and close.
• 00:39 Now first thing we can do is we can change the color and
• 00:42 it's just how you would think.
• 00:43 Let's give this a green color for instance.
• 00:45 Hit Reload, boom, now it becomes green.
• 00:48 But it's still underlined.
• 00:49 And you can see it's green, now if we click on it, it stays green.
• 00:53 Our last link, when we clicked on it, it changed color.
• 00:55 So we can change what happens when different things happen.
• 00:58 So if we hover, nothing happens, if we click, nothing happens, at this point.
• 01:02 And we might want those things to happen.
• 01:04 So how do we change this?
• 01:06 It's pretty easy, we come back here and let's change this to a-link and
• 01:10 save this and hit Reload and now when we click it.
• 01:13 Now this is an unvisited link, and in fact, we've already visited this.
• 01:18 So let's come back here and create another link.
• 01:21 And I'm just gonna copy this and change this to
• 01:25 something.html, save this and get rid of it.
• 01:30 Okay, so we've clicked this one so its purple, we haven't clicked this one yet
• 01:33 so its green.
• 01:34 And that's with the a: link.
• 01:36 Next we wanna look at a: hover.
• 01:41 And let's call this color: I don't know, let's go yellow.
• 01:47 If we save this and hit Reload, now if we hover over here, I put a space.
• 01:51 We do not want a space.
• 01:52 Save this, hit Reload, see now when we hover it changes to yellow,
• 01:56 that's really cool.
• 01:57 The next thing we want to look at is a: -active, oops did it again, active.
• 02:08 And let's give this a color of, I don't know, blue.
• 02:12 Save this, come back, hit Reload and now if I click this, boom, it becomes blue.
• 02:17 I haven't let my finger off the button yet.
• 02:19 So as soon as I do, see, we actually, it goes to that page.
• 02:23 If I click this it turns blue, if I let go, it goes to the page.
• 02:27 So that is active, hover and link.
• 02:30 I got an extra bracket there.
• 02:31 We can also look at a-visited.
• 02:37 And let's give this a color of, I don't know, pink.
• 02:41 So we've already visited this one, so it turns pink.
• 02:45 And if you notice if you hover, you can't hover anymore.
• 02:48 So we can do some weird things in here.
• 02:50 We can do a text decoration.
• 02:54 And with text decoration, you can do things like none or underline.
• 02:58 So this is for hover.
• 03:00 So for now, if we hit Reload when we hover,
• 03:06 Or you can't tell because, let's go back up to our main link and
• 03:11 give it a text-decoration of none.
• 03:14 So now, the default there is no thing, but if we hover, we get an underline.
• 03:21 So you may or may not want underlined, text decoration will do that for you.
• 03:25 Finally, we can give all these guys background color properties.
• 03:28 So, we can go background-color.
• 03:31 And lets say CCCCCC, give it a gray background.
• 03:36 If we hit Reload and, boom, we get a background.
• 03:39 And likewise for different things, you can give it different background colors.
• 03:46 And let's call this, let's just say black.
• 03:49 So now if we hover, we hit Reload, if we hover, boom the background turns black.
• 03:54 So you can mix and match with all of these things.
• 03:56 And I threw a lot at you in this video so you might wanna go back and
• 03:59 watch this again to see the different things.
• 04:02 And most important is a link, hover active, and visited, and that's all for
• 04:06 this video.

Lesson notes are only available for subscribers.