Link Pseudo-Classes

[00:00:00]
>> Jen Kramer: Okay, so did anybody style any of their links in their code pen? Yeah, so what did you do, sort of broadly speaking? What did you do for styling your links?
>> Speaker 2: I made it so that when you hover over the link the background is fuchsia.
>> Jen Kramer: Cool, all right, so we actually have hover state, somebody's already coded a hover state.

[00:00:23]
What have you got?
>> Speaker 2: I did hover and then I enlarged the text and changed the color.
>> Jen Kramer: You made it big and different color when you hover over it, very nice. Okay, so let's talk about how we go about styling links. So I went ahead and make my link set up this way.

[00:00:39]
So we just have an a here, we have a font weighted bold, a text decoration of none and a color brown. What does that text decoration none mean? Anybody? Anybody know what that is?
>> Speaker 3: The underline.
>> Jen Kramer: It takes out the underline. So remember by default links are blue and underlined.

[00:00:58]
And you can turn off that underline by turning off the text decoration, okay? So if we go on ahead, and just to remind you what my links look like here. So my links are right here, Frontend Masters, Google. University of Harvard Extension School, these ones right here, okay?

[00:01:24]
When I roll my mouse over there there's not a lot going on here. You have to pay attention to the cursor to know that these are even links, okay? If you notice that. Part of that issue is right now with what we have to work with, with our CSS selectors, we can select our a tag.

[00:01:44]
But a is actually a really complicated thing, right? links can be visited, they can be unvisited, we can be hovering over them. There's a lot of different things that can be going on with a link, right? So we have some additional items to work with to describe the states of our link that are called pseudo-classes.

[00:02:04]
And so one example of this is a:link. Okay, so a pseudo-class often starts with a colon like this followed by something else. There are many of these pseudo classes, I'm only introducing you to a few of them. And this is a:link. So these are the unvisited links on the web page.

[00:02:24]
Only the unvisited links. So if we do that and save that and refresh our web page, all my links look exactly the same. Because I guess I've never visited any of these things. So, let me visit a page, and then I'll come back and refresh. So now you see that I have the first link there selected, it's now purple.

[00:02:54]
Why is it purple?
>> Speaker 3: Cuz we've already gone there?
>> Jen Kramer: Cuz we've already visited that place before. And purple is the default visited color, right? So we can also style that visited link.
>> Jen Kramer: That's a visited, all right? We can change that do something different, color, green.
>> Jen Kramer: Font size, 2 m or 2 REM, okay.

[00:03:35]
We'll make them really big if they've been visited.
>> Jen Kramer: Font weight, normal. Normal is how we turn off the bold. So if it's bold in the link state, we can change that font weight by saying font weight normal in the visited state, okay? Okay, so then we also have our hover state, a hover.

[00:03:58]
And hover, of course is what happens when you actually hover over the link. Move your mouse, hover it over the link. So you can do something crazy here, you could say, color is orange.
>> Jen Kramer: Text-decoration none or underline.
>> Jen Kramer: So we'll turn back on that text-decoration when we hover over our link.

[00:04:29]
>> Jen Kramer: And then like Emma did, we can say background-color, white. That's certainly a legitimate thing to do. You can also set a background color on anything. And if we go ahead and look at that in Firefox, you can see we have how the links change when we hover over them.

[00:04:49]
Maybe I should change that background color to a black, that'll show up a little bit better.
>> Jen Kramer: Black.
>> Jen Kramer: Here we go.
>> Jen Kramer: Cool?
>> Jen Kramer: Any questions on that? Yes.
>> Speaker 2: When I was originally trying to do this I was trying to change the look of it in the using the list tags, I noticed that these links are lit are in the list.

[00:05:24]
>> Jen Kramer: Right.
>> Speaker 2: But that didn't work. I had these to a tag.
>> Jen Kramer: Have to use the a tag.
>> Speaker 2: What is the, I guess hierarchy going on there? Because the thing in the a tag is also in the inside of a list element. Why doesn't that work?

[00:05:37]
And that's the only thing inside of the list
>> Jen Kramer: That is an excellent question and it requires a lengthy answer. So I'm gonna try to simplify which is, it has to do with the cascade and the way the cascade is working. In the browser style sheet, your links are styled already to be blue and underlined.

[00:05:52]
So to try to override that blue underlined style with just a general list item, that actually is not going to work. So you would actually need to override the style by using a selector that's similar to the one that your browser used. So the a or better, a colon link.

[00:06:12]
Or a class might be involved with that, too. So let's talk about how we would go about adding a class to this as well. So let's say that we want, [COUGH], that link to Harvard. This link here to Harvard. So I'm on line 36 in my HTML. As we all know, Harvard is Maroon, right?

[00:06:37]
This lovely Harvard red, so we want out link to be Harvard red as well.
>> Jen Kramer: So we're going to put in a class here on my Harvard link. Right inside of that a tag, we can add a class.
>> Jen Kramer: And we can call this whatever, Harvard. Okay, so we'll add a class of Harvard in our HTML right inside of that a tag.

[00:07:02]
>> Jen Kramer: Over here on the side, we can write a different kind of selector. You haven't see this one before. We can say a.harvard. So what we've said here, notice it's a.harvard, no spaces, everybody see how that's done? So what we're saying here is for any a tag that has a class of harvard inside of it, okay?

[00:07:28]
And then we can say whatever additional part with it, link or visited or hover or anything else, and write our style that way. Yeah?
>> Speaker 2: And we could put the class in anywhere within the a tag?
>> Jen Kramer: Yeah.
>> [INAUDIBLE]
>> Jen Kramer: The attribute order here does not matter.

[00:07:48]
You can put the attributes in any order you want. It will work just fine. So here we'll say, color: maroon.
>> [COUGH].
>> Jen Kramer: So save your CSS and save your HTML.
>> Jen Kramer: And, let me refresh the webpage. Harvard is maroon there, but it's really hard to see with my brown links.

[00:08:20]
So let me change the link color for my other links. Make them, I don't know, light blue. And now you'll see that it worked. There we go. So you see that Harvard is definitely different. Frontend Masters is different because it's one that's been visited, these other links have not.

[00:08:43]
Okay, but Harvard now as that maroon color to it, makes sense? Sorta kinda, yeah?
>> Speaker 2: So is it considered good form to get that specific, by putting like a.harvard? Because if you don't have anything else with the class Harvard, you can say harvard.harvard in your css.
>> Jen Kramer: You can.

[00:09:03]
So if we did not say anything else here, we could just say .harvard.
>> Speaker 2: Could you not use the link or hover or visited unless you put the a in there?
>> Jen Kramer: Well, let's try this. So, if we say just .harvard. So, we've called a class with just .harvard and we refresh the page.

[00:09:26]
That quote doesn't work, okay? And the reason why again has to do with the cascade in CSS. And so this, this is considered not as specific enough to override the color of the link from some of these other ones that we have earlier in the document. So here, and there's a very long explanation, please just say, yes, okay, fine.

[00:09:53]
It doesn't work, it has to do with the cascades. If anybody's really interested, I'll tell you the whole story. [LAUGH] But I don't wanna blow up everybody's heads in the process. This is like really advanced stuff and I don't wanna quite go there with the full explanation.
>> Speaker 2: Does the hover functionality work for links or can it work for just the paragraphs?

[00:10:10]
>> Jen Kramer: Hover can work for anything, but hang on just a second lemme finish this example and then we'll try that out. So you definitely need the a in front of this in order for this to work. At least you need the a in front of this.
>> Jen Kramer: Okay, and that will bring that back.

[00:10:27]
And then you can add on the link state or anything else.