0:00
What the hell is going on guys? This is CSS for Beginners Lesson 20, and in this
0:11
lesson we're going to take a look at the hover, visited, and active pseudo classes
0:16
That's coming up. Okay, so just a quick recap first of all. We said that pseudo
0:21
classes are an extension to normal CSS. They come after the normal CSS selectors
0:26
and we use them to target more specific things, okay, and they split up into two
0:29
groups, generally speaking. That is the behavioral group, which is to do with
0:34
user interactivity on your web page, and the structural group, which is to target
0:39
kind of advanced structural elements. Now the syntax is here. You have your normal
0:44
selector, then your colon, and then the keyword of your pseudo class, then your
0:48
declaration. Okay then, so now we've covered that, I want to jump into the code and play around with a few of these behavioral pseudo classes
0:56
Alright guys, here I am back in the HTML, and I'm going to teach you probably three of
1:00
the most popular behavioral pseudo classes, okay, and they're all to do with
1:04
links. We're going to look at what happens when a link is hovered over by your mouse, when it's clicked in its active state, and when it's been visited
1:12
Okay, so the first one we'll look at is the hover effect. So first of all, to look
1:18
at our links, we're going to select all of the link tags, the a tags. Okay, so that's
1:22
our link selector, and then we're going to add our first pseudo class, which is the hover pseudo class. So we do our colon, then the hover keyword. That's the
1:29
keyword hover. Okay, so we're saying here we want to style these a tags when
1:34
they're hovered in this way. So I'm going to give them a color of red. Okay, so when
1:40
you hover over a link, it should turn red. Now the second one we're going to do is the active state. Okay, and then the active state is when you click on the link
1:48
itself. When you click down on your button on your mouse, for that moment
1:52
before you go to the new web page, that link is active. So we're going to change
1:57
the color of it for that moment. Okay, so the way we do that is by applying our
2:01
pseudo class to the a tag again, and the keyword this time is active. Self
2:06
explanatory. Really simple guys. And we're going to color it orange. Okay, and then
2:12
the third one we're going to do is the visited pseudo class. So same again
2:16
targeting all the a's, and the keyword is visited. Now the way this works is, if you
2:21
have a link on your web page, and say by default is color blue, or you style it
2:25
blue initially, if a user clicks on that link, they have now visited that link. So
2:30
if they come back to the page, that link will now display differently. Okay, so
2:35
we'll give this a color of purple. So that's it. Really simple. We've got three
2:41
keywords here, hover, active, and visited. They're probably going to be the ones
2:45
you use most when it comes to links. And yeah, all really simple. So when it's
2:51
hovered over, it turns red. When it's active, it's orange. And when it's visited
2:55
it's purple. So let's view this in a browser now. Save that, and open this up
2:59
in Chrome. Okay, so here's our links. And I've already used, I've already
3:07
demonstrated this, which is why this is purple. Okay, so initially it's blue, then
3:12
you hover over, it turns red. Okay, then you click it, oops, click it, you can see
3:18
it's orange. Okay, and then after that, when you visited it, it goes purple. Okay
3:24
then, so that about covers it. You've got your three keywords here, hover, active
3:31
and visited. Really popular ones. Dead simple. We just apply the pseudo class
3:36
keywords after the colon, and we've styled those three events. Alright, so
3:41
that about covers it for this lesson. If you have any questions whatsoever about
3:46
these pseudo classes, these three ones here, feel free to drop a comment below
3:49
and I'll try my best to answer that as soon as possible. Otherwise, if you
3:53
enjoyed these videos, please subscribe, like, share them, and I'll see you guys
3:58
in the next video where we're going to look at some more pseudo classes
