Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,305 --> 00:00:03,800
All right. In this lecture,
2
00:00:03,800 --> 00:00:08,423
we will learn how to style hyperlinks using pseudo classes,
3
00:00:09,920 --> 00:00:14,310
but let's start by quickly fixing this red text here
4
00:00:14,310 --> 00:00:16,219
that we don't want.
5
00:00:16,219 --> 00:00:19,710
And actually what I will do here is to put this back
6
00:00:19,710 --> 00:00:21,360
to first child,
7
00:00:21,360 --> 00:00:24,970
which remember doesn't work and then I will place a comment
8
00:00:24,970 --> 00:00:29,340
here using command or control slash.
9
00:00:29,340 --> 00:00:34,090
And then I will simply write that this is that misconception
10
00:00:34,090 --> 00:00:36,163
that we talked about in the last video.
11
00:00:37,110 --> 00:00:41,190
So this won't work.
12
00:00:41,190 --> 00:00:42,650
Okay. And so with this,
13
00:00:42,650 --> 00:00:46,223
we are starting to document our code just a little bit.
14
00:00:47,740 --> 00:00:51,320
And so now I will actually add another comment here to say
15
00:00:51,320 --> 00:00:56,320
that here we will now be styling links or hyperlinks.
16
00:00:57,340 --> 00:01:01,470
Now we could think that this is how we style links.
17
00:01:01,470 --> 00:01:04,410
So we just write the A.
18
00:01:04,410 --> 00:01:08,390
So selecting all the anchor elements on the page
19
00:01:08,390 --> 00:01:11,673
and then we could, for example, style their color.
20
00:01:13,000 --> 00:01:14,640
And, let's say that
21
00:01:14,640 --> 00:01:17,957
we wanted to go with this same blue color here.
22
00:01:17,957 --> 00:01:22,470
And then as we reload it actually this links
23
00:01:22,470 --> 00:01:24,200
look already nice.
24
00:01:24,200 --> 00:01:29,100
So this one turned blue and these ones down here and
25
00:01:29,100 --> 00:01:31,320
probably also these ones.
26
00:01:31,320 --> 00:01:32,630
Yeah, right.
27
00:01:32,630 --> 00:01:37,320
However, doing simply this, is actually not a good practice.
28
00:01:37,320 --> 00:01:41,250
So we shouldn't simply select the anchor and style it.
29
00:01:41,250 --> 00:01:45,140
Instead we should style a pseudo class of the anchor
30
00:01:45,140 --> 00:01:48,980
because that will then allow us to target different states.
31
00:01:48,980 --> 00:01:51,290
So the first one that we want to style
32
00:01:51,290 --> 00:01:53,423
is the link pseudo class.
33
00:01:54,580 --> 00:01:58,120
So this will basically target all the anchor elements
34
00:01:58,120 --> 00:02:00,700
that have an href attribute,
35
00:02:00,700 --> 00:02:04,570
because remember that we can actually specify anchors,
36
00:02:04,570 --> 00:02:08,370
so A elements without the href attribute.
37
00:02:08,370 --> 00:02:11,490
And so they will then be targeted with the code that we had
38
00:02:11,490 --> 00:02:15,140
before, even though they are not really a link.
39
00:02:15,140 --> 00:02:16,430
But with this,
40
00:02:16,430 --> 00:02:19,860
so by specifying the link pseudo class,
41
00:02:19,860 --> 00:02:22,980
this will then only target actual links.
42
00:02:22,980 --> 00:02:26,160
So if we reload, it still looks nice.
43
00:02:26,160 --> 00:02:28,460
Let me actually show that to you very quickly.
44
00:02:29,770 --> 00:02:32,193
So here, if we had to color of red,
45
00:02:33,700 --> 00:02:36,973
and if I then specify an A element somewhere here,
46
00:02:40,920 --> 00:02:45,380
a test A, so that's somewhere here.
47
00:02:45,380 --> 00:02:49,170
And so you'll see that this one is now actually red.
48
00:02:49,170 --> 00:02:51,900
And so that's coming from this style here,
49
00:02:51,900 --> 00:02:54,060
but not from this. And again,
50
00:02:54,060 --> 00:02:57,860
that's because this one only targets A element that do
51
00:02:57,860 --> 00:03:02,543
actually have href attribute, which this one does not.
52
00:03:04,450 --> 00:03:08,823
So let's get rid of it and also of this rule here.
53
00:03:10,820 --> 00:03:11,960
And yeah,
54
00:03:11,960 --> 00:03:14,633
so now you know that this is how it should be done.
55
00:03:15,620 --> 00:03:18,820
Let's actually keep looking at these links here.
56
00:03:18,820 --> 00:03:20,980
Now, another thing that's coming to do
57
00:03:20,980 --> 00:03:24,830
when we style links is to get rid of the underline.
58
00:03:24,830 --> 00:03:28,520
So here is another CSS property to style text,
59
00:03:28,520 --> 00:03:31,013
which is text-decoration,
60
00:03:32,610 --> 00:03:35,610
which we can set in this case to none.
61
00:03:35,610 --> 00:03:38,400
But there are a bunch of other values that I will show you
62
00:03:38,400 --> 00:03:39,610
in a second,
63
00:03:39,610 --> 00:03:42,820
but for now we just want to get rid of the underline.
64
00:03:42,820 --> 00:03:46,163
And so in these situations, it's very common in multiples
65
00:03:46,163 --> 00:03:49,663
CSS properties to use the value of none.
66
00:03:51,180 --> 00:03:53,333
And indeed now it's gone.
67
00:03:54,580 --> 00:03:56,780
And the same of course, down here.
68
00:03:56,780 --> 00:04:00,453
Great. Next up we have the visited pseudo class.
69
00:04:01,840 --> 00:04:04,980
So many sites actually display links differently
70
00:04:04,980 --> 00:04:07,040
if they have been clicked before.
71
00:04:07,040 --> 00:04:09,970
And one good example of that is Google
72
00:04:09,970 --> 00:04:13,660
and in CSS that would be really easy to do.
73
00:04:13,660 --> 00:04:17,480
All we had to do was to select the anchors
74
00:04:17,480 --> 00:04:20,283
with the visited pseudo class.
75
00:04:21,630 --> 00:04:24,690
So here we could them give them a different color.
76
00:04:24,690 --> 00:04:28,863
Let's say like a light gray, something like this.
77
00:04:29,840 --> 00:04:33,890
Okay. But in practice, we never do that actually.
78
00:04:33,890 --> 00:04:35,710
So on normal pages,
79
00:04:35,710 --> 00:04:38,780
usually we always just give the visited links,
80
00:04:38,780 --> 00:04:42,933
the same color as on the link pseudo class.
81
00:04:44,040 --> 00:04:45,170
So that's just do that
82
00:04:47,610 --> 00:04:49,233
and call it a day.
83
00:04:50,570 --> 00:04:54,000
And these two rules are actually now very similar.
84
00:04:54,000 --> 00:04:57,663
And so usually we actually group them together,
85
00:04:59,610 --> 00:05:03,510
but now let's not do that and keep everything just nicely
86
00:05:03,510 --> 00:05:06,373
separated just for the purpose of learning here.
87
00:05:08,740 --> 00:05:13,440
Anyway, let's now go to our next pseudo class for anchors,
88
00:05:13,440 --> 00:05:16,100
which is the most important one I would say,
89
00:05:16,100 --> 00:05:17,890
and that is hover.
90
00:05:17,890 --> 00:05:19,790
So in the hover pseudo class,
91
00:05:19,790 --> 00:05:23,230
we can define any styles that we want to be applied to the
92
00:05:23,230 --> 00:05:27,453
anchor as soon as the element is hovered by the mouse.
93
00:05:28,410 --> 00:05:30,780
So for example, let's say that in this situation,
94
00:05:30,780 --> 00:05:32,370
we wanted to change the color
95
00:05:33,620 --> 00:05:36,440
to something like orange red,
96
00:05:36,440 --> 00:05:39,200
and which is one of these color names that
97
00:05:39,200 --> 00:05:41,470
I actually like a little bit.
98
00:05:41,470 --> 00:05:44,390
And then let's say that we also wanted to change
99
00:05:44,390 --> 00:05:47,390
the font-weight to bold.
100
00:05:47,390 --> 00:05:50,560
So kind of a bit of a crazy style here.
101
00:05:50,560 --> 00:05:54,430
And let's actually also bring back the underline.
102
00:05:54,430 --> 00:05:57,560
So text-decoration,
103
00:05:57,560 --> 00:06:01,060
and this one is another one of these shorthand properties
104
00:06:01,060 --> 00:06:04,000
where we can define multiple values.
105
00:06:04,000 --> 00:06:07,500
So in this case, we can define the text-decoration line,
106
00:06:07,500 --> 00:06:11,570
text-decoration style, and text-decoration color.
107
00:06:11,570 --> 00:06:13,923
We can say underline,
108
00:06:14,960 --> 00:06:17,690
then we can define the style of the underline,
109
00:06:17,690 --> 00:06:21,200
which is very similar to the style of the border.
110
00:06:21,200 --> 00:06:24,180
So let's say dotted, for example,
111
00:06:24,180 --> 00:06:26,310
and then finally the color.
112
00:06:26,310 --> 00:06:28,333
So that said it also to orange red.
113
00:06:29,520 --> 00:06:33,440
And let's see what now happens as we hover this link
114
00:06:34,620 --> 00:06:37,090
and it worked.
115
00:06:37,090 --> 00:06:38,740
So the color changed,
116
00:06:38,740 --> 00:06:43,203
the font-weight also changed and also the text-decoration.
117
00:06:44,360 --> 00:06:49,360
Let's try another one like wavy, which is also fun.
118
00:06:50,110 --> 00:06:52,133
And then it looks like, like this.
119
00:06:53,170 --> 00:06:55,970
So again, a little bit of a crazy style.
120
00:06:55,970 --> 00:06:59,270
And if we want it to be a bit less crazy,
121
00:06:59,270 --> 00:07:01,900
we can actually omit the second one
122
00:07:01,900 --> 00:07:05,040
and CSS will then automatically figure out that
123
00:07:05,040 --> 00:07:06,890
the second one here is now the color.
124
00:07:07,760 --> 00:07:12,760
And so this looks a little bit more normal, right?
125
00:07:12,810 --> 00:07:14,903
And so let's keep it like this.
126
00:07:15,980 --> 00:07:16,813
Finally,
127
00:07:16,813 --> 00:07:20,020
we can also specify a fourth pseudo class and
128
00:07:20,020 --> 00:07:24,120
this one is the active pseudo class,
129
00:07:24,120 --> 00:07:27,303
and this is the state in which we are actually clicking.
130
00:07:28,140 --> 00:07:30,820
So when we do actually click on a link,
131
00:07:30,820 --> 00:07:34,510
then the act of pseudo class is edited to the element
132
00:07:34,510 --> 00:07:37,590
and we can then select that here like this.
133
00:07:37,590 --> 00:07:42,053
So just like we did with all these other four link states,
134
00:07:43,110 --> 00:07:46,440
so let's keep adding some crazy styles here,
135
00:07:46,440 --> 00:07:49,990
like setting the background color to black
136
00:07:49,990 --> 00:07:51,460
in those situations
137
00:07:53,310 --> 00:07:57,187
and let's even make the font style italic.
138
00:08:01,819 --> 00:08:03,402
Okay, so that's it.
139
00:08:05,130 --> 00:08:06,900
So the hover state looks the same,
140
00:08:06,900 --> 00:08:09,000
but now I'm going to click.
141
00:08:09,000 --> 00:08:10,890
And so this is what it looks like
142
00:08:10,890 --> 00:08:13,650
during the duration of the click.
143
00:08:13,650 --> 00:08:16,740
Now, if I move out here and let it go,
144
00:08:16,740 --> 00:08:19,640
then it goes back to the normal state.
145
00:08:19,640 --> 00:08:20,590
All right.
146
00:08:20,590 --> 00:08:23,290
And I think that's actually it,
147
00:08:23,290 --> 00:08:26,810
what matters here is that these four states are always
148
00:08:26,810 --> 00:08:29,330
defined in this exact order.
149
00:08:29,330 --> 00:08:34,330
So always link, visited, hover and active.
150
00:08:34,700 --> 00:08:38,360
So that is if it's easier to memorize for you
151
00:08:38,360 --> 00:08:42,460
L V H A, all right.
152
00:08:42,460 --> 00:08:46,060
But of course we will keep doing this a couple of more times
153
00:08:46,060 --> 00:08:47,850
throughout the rest of the course,
154
00:08:47,850 --> 00:08:50,723
and then things will become even easier for you.
155
00:08:51,790 --> 00:08:53,180
And now with this,
156
00:08:53,180 --> 00:08:57,570
we actually reached the end of the very basics of some
157
00:08:57,570 --> 00:09:00,810
simple visual styling with CSS.
158
00:09:00,810 --> 00:09:02,060
Now there is of course,
159
00:09:02,060 --> 00:09:06,840
a lot of other visual stuff like border radios, shadows,
160
00:09:06,840 --> 00:09:10,110
gradients, background images, and more,
161
00:09:10,110 --> 00:09:13,020
but we will leave that for a bit later,
162
00:09:13,020 --> 00:09:15,990
but for now we will leave it at this point.
163
00:09:15,990 --> 00:09:18,640
And this is already great progress.
164
00:09:18,640 --> 00:09:22,200
So congratulations for making it this far.
165
00:09:22,200 --> 00:09:26,500
And for already having learned all of the CSS.
166
00:09:26,500 --> 00:09:30,290
Next up, we will learn something about the browser.
167
00:09:30,290 --> 00:09:33,230
So a very helpful tool at the end, we will, of course,
168
00:09:33,230 --> 00:09:37,340
keep learning CSS fundamentals by learning some theory and
169
00:09:37,340 --> 00:09:39,110
then learn some more properties
170
00:09:39,110 --> 00:09:41,453
that are related to some other stuff.
12812
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.