Original subtitles

All right. In this lecture,

we will learn how to style hyperlinks using pseudo classes,

but let's start by quickly fixing this red text here

that we don't want.

And actually what I will do here is to put this back

to first child,

which remember doesn't work and then I will place a comment

here using command or control slash.

And then I will simply write that this is that misconception

that we talked about in the last video.

So this won't work.

Okay. And so with this,

we are starting to document our code just a little bit.

And so now I will actually add another comment here to say

that here we will now be styling links or hyperlinks.

Now we could think that this is how we style links.

So we just write the A.

So selecting all the anchor elements on the page

and then we could, for example, style their color.

And, let's say that

we wanted to go with this same blue color here.

And then as we reload it actually this links

look already nice.

So this one turned blue and these ones down here and

probably also these ones.

Yeah, right.

However, doing simply this, is actually not a good practice.

So we shouldn't simply select the anchor and style it.

Instead we should style a pseudo class of the anchor

because that will then allow us to target different states.

So the first one that we want to style

is the link pseudo class.

So this will basically target all the anchor elements

that have an href attribute,

because remember that we can actually specify anchors,

so A elements without the href attribute.

And so they will then be targeted with the code that we had

before, even though they are not really a link.

But with this,

so by specifying the link pseudo class,

this will then only target actual links.

So if we reload, it still looks nice.

Let me actually show that to you very quickly.

So here, if we had to color of red,

and if I then specify an A element somewhere here,

a test A, so that's somewhere here.

And so you'll see that this one is now actually red.

And so that's coming from this style here,

but not from this. And again,

that's because this one only targets A element that do

actually have href attribute, which this one does not.

So let's get rid of it and also of this rule here.

And yeah,

so now you know that this is how it should be done.

Let's actually keep looking at these links here.

Now, another thing that's coming to do

when we style links is to get rid of the underline.

So here is another CSS property to style text,

which is text-decoration,

which we can set in this case to none.

But there are a bunch of other values that I will show you

in a second,

but for now we just want to get rid of the underline.

And so in these situations, it's very common in multiples

CSS properties to use the value of none.

And indeed now it's gone.

And the same of course, down here.

Great. Next up we have the visited pseudo class.

So many sites actually display links differently

if they have been clicked before.

And one good example of that is Google

and in CSS that would be really easy to do.

All we had to do was to select the anchors

with the visited pseudo class.

So here we could them give them a different color.

Let's say like a light gray, something like this.

Okay. But in practice, we never do that actually.

So on normal pages,

usually we always just give the visited links,

the same color as on the link pseudo class.

So that's just do that

and call it a day.

And these two rules are actually now very similar.

And so usually we actually group them together,

but now let's not do that and keep everything just nicely

separated just for the purpose of learning here.

Anyway, let's now go to our next pseudo class for anchors,

which is the most important one I would say,

and that is hover.

So in the hover pseudo class,

we can define any styles that we want to be applied to the

anchor as soon as the element is hovered by the mouse.

So for example, let's say that in this situation,

we wanted to change the color

to something like orange red,

and which is one of these color names that

I actually like a little bit.

And then let's say that we also wanted to change

the font-weight to bold.

So kind of a bit of a crazy style here.

And let's actually also bring back the underline.

So text-decoration,

and this one is another one of these shorthand properties

where we can define multiple values.

So in this case, we can define the text-decoration line,

text-decoration style, and text-decoration color.

We can say underline,

then we can define the style of the underline,

which is very similar to the style of the border.

So let's say dotted, for example,

and then finally the color.

So that said it also to orange red.

And let's see what now happens as we hover this link

and it worked.

So the color changed,

the font-weight also changed and also the text-decoration.

Let's try another one like wavy, which is also fun.

And then it looks like, like this.

So again, a little bit of a crazy style.

And if we want it to be a bit less crazy,

we can actually omit the second one

and CSS will then automatically figure out that

the second one here is now the color.

And so this looks a little bit more normal, right?

And so let's keep it like this.

Finally,

we can also specify a fourth pseudo class and

this one is the active pseudo class,

and this is the state in which we are actually clicking.

So when we do actually click on a link,

then the act of pseudo class is edited to the element

and we can then select that here like this.

So just like we did with all these other four link states,

so let's keep adding some crazy styles here,

like setting the background color to black

in those situations

and let's even make the font style italic.

Okay, so that's it.

So the hover state looks the same,

but now I'm going to click.

And so this is what it looks like

during the duration of the click.

Now, if I move out here and let it go,

then it goes back to the normal state.

All right.

And I think that's actually it,

what matters here is that these four states are always

defined in this exact order.

So always link, visited, hover and active.

So that is if it's easier to memorize for you

L V H A, all right.

But of course we will keep doing this a couple of more times

throughout the rest of the course,

and then things will become even easier for you.

And now with this,

we actually reached the end of the very basics of some

simple visual styling with CSS.

Now there is of course,

a lot of other visual stuff like border radios, shadows,

gradients, background images, and more,

but we will leave that for a bit later,

but for now we will leave it at this point.

And this is already great progress.

So congratulations for making it this far.

And for already having learned all of the CSS.

Next up, we will learn something about the browser.

So a very helpful tool at the end, we will, of course,

keep learning CSS fundamentals by learning some theory and

then learn some more properties

that are related to some other stuff.