0:00
What's up guys, welcome to your 33rd lesson in CSS for Beginners
0:11
And in this lesson we're going to take what we've learnt so far to do with font styling
0:15
and we're going to style up some links. That's coming up. Okay, so the first thing we need to do is pop a link tag in this document and we're
0:23
just going to do it underneath this header div. So remember to do that, it's just an anchor tag and then we'll give it any old href for
0:30
now, it doesn't really matter. And this is a link, can be the text and then we'll close that off
0:36
Oops, brackets did it for me, we don't need it twice. And we'll save that
0:40
And in fact what we're going to do is just copy that and paste it a couple of times
0:44
So we've got a few links now. Alright then, so let's target these links
0:48
All we need to do is do a simple A selector. And we're going to use some of the properties we've learnt already in previous videos
0:55
But before we do that I want to show you what these links currently look like using the
0:59
default browser style. So I'm going to get this open up in a browser
1:06
And there they are, three links and they're all blue and underlined. So it's pretty obvious to me and probably you that these are all links
1:12
That's the aim, people know that they should click on them now. So we're going to apply some of our own styling because we might have a website where the
1:20
blue underlined links don't fit in. And we want to do something different with them
1:24
So the first thing we're going to do is add a colour property. And we're just going to choose a groovy colour from one of these
1:31
Let's have a look, which one do I like? Burlywood, I wonder what that is
1:35
Crimson, I quite like that. Alright, so we'll give that a crimson colour
1:39
What should we do next? I'll tell you what I'm going to do is take off the text decoration of underline
1:44
Don't really like that. A bit too predictable. So I'm going to give this a non-value
1:51
And then we'll give it a font weight of bold. Now because it's not underlined, maybe people won't understand that it's meant to be clicked
2:01
and they might just assume I'm trying to make this word stand out for some reason
2:06
But I think the fact that it says this is a link kind of gives it away. So we can get away with it in this case
2:11
So we've done our A styles here. Let's just view it in a browser, see what it's looking like
2:18
Cool, so now they are all this crimson colour. There's no underline
2:25
And due to the fact that it says this is a link, it's pretty obvious it's a link
2:29
So that's cool. Now what we normally do when we do a style for a link is give it a hover effect as well
2:37
So that when someone hovers over it, they know it's a link or they know they're hovering
2:41
over that link. And it just looks cool anyway, doesn't it? So let's do the hover pseudo class
2:45
Remember we do our pseudo classes by specifying it's a pseudo class with the colon and then
2:51
we just write the hover keyword. And then we're going to give it a colour
2:55
Let's look for another cool colour here. What have we got
3:04
Let's go for dark magenta. That looks pretty cool. And then we're going to give it a text decoration of underline
3:15
And you know what? We're going to give it a background colour. I know we've not technically done background colour yet, but let's give it one anyway
3:22
Let's go with this aquamarine. This is just going to look absolutely awesome, guys
3:27
If you need links designing, you know where to come. Let's get this opened up in a browser
3:38
All right, so they're all crimson, no underlining, yeah? Bam. That is pretty awesome
3:45
It looks like a website I made when I first learned CSS
3:50
It's not really awesome. It's terrible. But you get the point. You can add all of these properties
3:55
And where's our syntax gone? You can get some pretty cool looking links or buttons
4:00
And we're going to cover a little bit more to do with buttons later on, you know, things
4:04
like padding and margin. But for now, that should get you started with making some cool links of your own
4:11
If you have any comments or questions, leave those below. Otherwise, if you enjoy these videos, please like them, share and subscribe
4:17
And I'll see you guys in the next video
