Styling Webpage Links for Chrome's Changes

Let's see how we can change the styling of links. Now these just have the default styling and based on pages that we've been to, the colors of these links should change. In other words, if I click on contact and then come back, the color of that link by default should change.

Now there's been a very recent change to Google Chrome where this is no longer working. There seems to be some behind-the-scenes setting that you can change to get it to work again, but I don't know if this is a longer-term plan or if it's a bug. I've never seen this before, but in the meantime, for us to be able to see how these links change in color like they have been for the history of how all the browsers have worked, I can use any other browser other than Chrome.

This only seems to affect Chrome, so like I said, I don't know if it's some new decision of what Chrome is going to do differently now or maybe it's just a bug, but in the meantime, we can preview in a different browser. That could be any other browser. It could be Safari on the Mac, Firefox on Mac or PC, Microsoft Edge on Mac or PC, and if you have this browser preview extension in, you can say open in other browsers and then you can say like if you're on either Mac or PC and you got Firefox installed, you can look at it in Firefox and notice here I'm on this page and so this is like a kind of a purple color, and if I click on contact and then come back, notice how it is kind of become a purple color as well.

So the blues are links that I have not clicked and the purples are links that I have clicked, but you can also preview that in other browsers. For example, if you're on the Mac, you could do that in Safari, and if you're on Windows, it would also probably list Microsoft Edge. I also have Microsoft Edge, which is based on Chrome, and even though it's based on Chrome, this does not affect Edge.

If I just copy the address from a browser and then go over to Microsoft Edge and put it there, this seems to be working as expected. It's the same rendering engine as Chrome, so Chrome must have some additional setting that they're changing. So I'm just going to use Firefox because that's available on all the platforms here.

Again, when I click a link, it starts one color. When I come back, it changes color to indicate that you've been to that link. Now, we don't have to keep that behavior necessarily, but if we want to, we might not want the blue, we might not want the purple, we might not want underlines.

There are different ways we can style our links. So how do we how do we style our links? So the link tag is the A tag, A for anchor tag, and I want to style links. I'm just going to stick it in here, and A would style all of the states of the anchor tag.

If I put a color onto this, and I'm going to grab this blue color here, this matches our design, and I'm going to save that, come back to the browser, and hit refresh. Notice that this matches the blue of our logo, but all of them change. So I've said every single state that these links go through.

Whether I have or have not clicked it, I've basically gotten rid of the color changing on this page. So all my links, no matter whether I've clicked on them or not, are all the same color. If you want them always to be just a single color, you can do that.

Also, if you don't want the underline, that underline is text decoration. If you set text decoration, it's underlined by default. So that is the default, but you can say none.

So you want no text decoration. That'll get rid of your underline. Now if you are going to get rid of the underline, just make sure that it's very clear to other people who those are clickable things, either through color change or somehow making those look clickable.

All right, now I've gotten rid of the underline, but maybe I don't like that they're always the same color. I want to do some different colors. So let's see what we can do in terms of our coloring here.

There are different states that these links go through, and essentially what happens is behind the scenes, the web browser is going to go to that link, and depending on whether you've interacted with it or not, they're going to add a class. Now they don't actually type it in to the code. They're doing this behind the scenes invisibly.

You don't even see it, but they're going to add classes like hover when you're over it, visited once you visited it. So they're adding these classes to this, and they're putting them on, taking them off as appropriate. So for example, if you haven't visited yet, they don't add the visited class.

Now because these are not classes that I am making up, I don't access them with the dot syntax. These are what we call pseudo classes. A pseudo class is a class that the browser adds, not you.

So these are done with a colon. So colon link. The colon link, this is the link class.

So links get this. This is the default link color before you've visited that link. So I'm going to save that, and I just styled the non-visited links.

So that link right there gets that color. I have not visited that link yet, so it gets this blue. And once I have visited it, and then I come back, now it changes.

Now it's the visited color, which I can also make a rule for that as well. Now notice that the text decoration was also applied to all of them because they are all links. The question is, are they a link and visited? So this is where it actually adds multiple classes to the same thing.

This is everything's a link, but now it also got a visited class as well. And so if I want to talk about visited links, they are anchor tags, and they have a visited class. Now again, this is not a regular class.

This is a pseudo class, one that's not added by us, one that's added by the browser. Therefore we're using the colon there. And here I can change the color.

So it's still going to get the link style up above. It's still getting the text decoration of none, but I want to change this color, and maybe I want this to be a gray. So I'm going to do a gray like this because once I visit it, we can kind of gray it out because you've been there.

So it'll be prominent before you click it, less prominent after you visit it. Now they're all gray. Coming down here, Alcatraz, before I click it, blue.

That's the link state. Once I click it, and then I go back, now notice how it's gray. That becomes visited.

Still has this text decoration none because it is both a link and it has been visited. And there's a couple other states. The next one is what I think a lot of people would be interested in, the hover state.

When I'm hovering over it, what do I want to do? Maybe I want to bring the underline back. So I could do a text decoration underline, which is actually what it is by default, and that would change it. Also, I can apply a color as well.

Maybe I make it the orange color so it stands out. So I'm going to change the color and make it underlined when I hover. Now when I hover, it gets the underline and it gets orange.

All right. So there we got a cool hover effect. Now, when you're pressing down for just a fleeting moment, if I press down, notice I can drag it away just to show that I'm pressing.

That fleeting moment when you click, technically it does do a press. And that is called active. Active is when you're actively pushing on that, even though it's just a millisecond that you're going to see that.

It's not going to be very prominent. So let's say I make this color red. And actually, I'm going to put that here.

The order of these is going to matter, and I'm going to talk about that order in just a moment. So I'm going to save that. Now, when I press, notice how it becomes red.

Actually, that red is too subtle. I'm going to make it green so it stands out because going from orange to red is not very apparent. Save that.

Press. Notice it goes green. And normally, you don't sit there pressing it.

You just click it and it goes to some other page. Click it. It goes to the page.

You come back. So you probably don't even notice this quick flicker of green because it happens so quickly. Out of all of the states, this is the least important.

Now, if you were making a button that looked like a button where maybe you were putting a rounded rectangle around it and putting space and putting a background color, and then it was kind of sitting higher, and then you wanted to kind of depress like it's you're pushing it in for that brief moment. So it kind of pushes down. Then that could be kind of interesting.

But when it comes to just plain text like this, the active is the least important of all of these. So those are the various states that we can do. But the order of them is very important because if I reorder them and I put active here, for example, let me save that and refresh.

Now when I press down and you'll have to trust me that I am pressing, it doesn't go green. Why does it not go green? Well, because it is trying to get multiple styles at the same time. So as I am pressing, it is both active and I am hovering.

So both of those classes are being applied. If it has both classes, it is both active and hovered, both styles would try to apply. Well, in this case, both of these styles are of the same specificity.

Notice the specificity score is 11. 1 for the tag, that gets you 1. And this is a class, even though it's a pseudo class applied by the browser, this gives you a class which is 10 and a tag which is 1. So this is a score of 11 and this 2 also is a score of 11. When you have two rules that are of the same specificity, meaning they're equally specific, only then does the later rule override the earlier rule.

The idea is if this says it's green and then this later comes in and says, oh no, it's orange, whoever gets the last word in the argument and they win. The only time the code order matters is when two rules have the same specificity. If they had different specificity, whichever is higher is the one that's going to win.

The only time code order matters is only when they are the same. So in that case, active must come second because if I start hovering and then I click, it's actually the click that is more important than the hover because I already saw the hover and then I need to see the click. So the click needs to come in afterwards.

Now I hover, I click, and the click overrides the hover. So the order of these, there's an easy way to remember these, lord, vader, hate, furry, animals, link, visited, hover, focus, which we're going to do in just a second, and then active. So, and that's going to be in your exercise just so you can remember that, but lord for link, vader, hate, furry, animals.

So that's the order from top to bottom. Now what's this whole focus thing? The focus is another thing that you may not ever see, but it is when you are keyboard navigating. So I can use the tab key or shift tab to go back and forth.

And so when I, let's say I click on the page and then I hit TAB, notice I can tab through the links. Depends on the browser if this is maybe a different keyboard shortcut or something, but this is for accessibility purposes. What if somebody does not have any hands and they are using a prosthetic in their mouth to push keys on their keyboard and that is how they're hitting the tab key to navigate through their page instead of using a mouse, for example.

So you can then hit ENTER if you want to go to that page and that will execute the thing that you've focused on. So since one of these has focus, there is a focus state and right now the focus state does not look any different. But what we might want to do is maybe the hover state, which kind of has a nice appearance that really draws your eye in, maybe we should use the same styling for the focus.

Now, while we could make a different focus style just for focus, if we want to reuse the same styling here, I could say let's, in addition to styling links when we're hovering, let's also do links when we're focusing. And we still get the Lord Vader hates furry animals. We're still getting that same order, but now both the hover state and the focus state will all look the same.

I'm not saying you have to make them look the same, but that might be something you want to do so you don't have to design yet another appearance. Focus doesn't have to look different. Now when I tab through, oh, look at that.

Now it looks just like the hover is just doing it on focus. Now, if you don't like the outline that's here, this blue outline, that is actually, it's literally called outline. It's not border.

It's a bit different. And so if we want to remove that which would mean you'd have to have some, some sort of good focus styling, because before this focus style, we couldn't really tell which thing was in focus other than that outline. But now that we've given a good focus style, we could say for links here and just to be clear, this right here, we could kind of just clean this up and just say, Hey, these are all of the States and then different.

If it's visited different, if it's hover and focus different, if it's active, you don't actually have to say colon link. These are going to be inherited by all the other States anyway. If you just want to clean this up, you could just simply say a, and then if you want to make any other individual state different this would take care of all the States, except the ones that you have called out.

So that might be something you want to do is just say this is for all the States. And then I can come back in and you don't have to do them all. Like if you didn't want to have to do a hover, you wouldn't have to, you could just do like all the States, except visited is different.

So that'd be something you could do. And I could say, okay, links are going to have an outline and I want to change that. So let's say, well, I can actually style it.

Let's actually, maybe we just change the design of it. Maybe we give it a different color. So maybe we just don't like that blue that's there.

And so we could, we could use our blue. We could use our, our nice coordinated blue and say, let's just, let's use our outline color instead of their outline color. And so that does match.

And, and I don't like how close it is actually. So I could do, I could do offset. Offset is like the outline offset.

It's kind of like padding, but again, outlines a bit different outline does not follow the same kind of box model type approach that borders and padding and margins do. It's a, it's a bit different, but offset is it's kind of like push out, offset it from its original place. And it's kind of like a padding, if you will, for that outline.

And so now, Oh, that now has a little bit of breathing room around that. We could, we could get rid of that. Nice.

All right. So that way you can customize it. And if we want to get rid of it completely, we can just say outline none, and then it wouldn't have an outline, but that outline does really draw attention.

If somebody is keyboard navigating, you might want to leave that on. If you're going to turn it off, like I just showed, just be careful and just really have a good focus state. That's really obvious.

I think it's not necessarily even obvious enough with this. So I think it's actually better for accessibility to leave the outline on, but just customize how it looks for our website, but just be careful because you do want it to be very obvious to somebody who is using this so that they can make sure that they see it. So why don't you try this out in exercise 4a in the book.