Basic typography: styling links


Let’s look at how to style links in HTML. So, here is an a tag right here, and it
has, it doesn’t go anywhere but it’s at least a link. So, if we want to style that, very simply
we come in here and we target our a element, give some curly
braces. And let’s say we change the color to
darkgreen like this. So, now you can see I’ve styled the a tag. If you wanted to remove the link or the underline, you would do
text-decoration none, like that. But that’s usually not a good idea when
the link is embedded inside of text. So only if it’s really obvious that it’s a
link. Then you could remove the text decoration. So, also, often, when we’re styling our
links, we have a hover state. So, if we go a:hover, we can give it a
different, different style. Like, give it the color, orange, like
this. [SOUND] Now, when we go in here and move our mouse over it, you can see that
it highlights orange. So that’s the Hover state. [SOUND] There’s actually a bunch of
different states that we can style in our link. So, first of all, after the a tag up here,
I usually like to go a:link, and that’s the style links that haven’t
been visited yet. So here it doesn’t make any difference,
and that’s okay. Also, you can starget, target or style the
visited version, so a:visited. So, if I just click on this by default, it
doesn’t do anything. But if I want to now change it to color of
limegreen. Now that I’ve visited this link, you can
see that it’s actually lime green instead. So let’s create another link in here, just
so we can see how this works, a href equals
#nowhere. All right, just need to make it go to a
different location, like that. So this link right here is dark green
because it hasn’t been visited. But this one up here is lime green,
because it has been visited. So we can style the visited state of our
links. Another one is called Focus. This is for when you use the keyboard to
access your link. So, if I press Tab in my browser I can
access the link like that and you can see it turns blue now when I Tab
to it. It still turns orange when I Hover, but when I’m focusing it with the keyboard, it
can now turn blue. And the final one is a:active, and this is when you press your mouse button
down on the link but don’t remove it. So I’m going to press my mouse down here. And it’s going to be red, for some reason. Oh, that one’s working, there we go, I
just didn’t save it. Okay, so you can see like that, when I
press my mouse down, it goes red. So that’s the active. So we have Link, which is for just
standard links. We have Visited for styling the visited
state. Hover, when you hover your mouse over. Focus for when you Tab to it with the keyboard and
Active for when you press your mouse down. Now often it’s actually a good idea to put
them in this order. Link, Visited, Hover, Focus, Active and that’s kind of
the way that browsers like to have them. In fact, there’s a nice sort of saying
that can go along with that, to help you remember. And it’s, Lord Vader’s handle, formerly
Anakin. This gives you a little hint on to what
order to put these in your web site.

One Reply to “Basic typography: styling links”

Leave a Reply

Your email address will not be published. Required fields are marked *