1
00:00:02,090 --> 00:00:05,470
Now with that link styling added here,

2
00:00:05,470 --> 00:00:08,440
there's one important thing about CSS,

3
00:00:08,440 --> 00:00:10,040
which I wanna point out.

4
00:00:10,040 --> 00:00:14,660
And that is the fact that multiple different rules

5
00:00:14,660 --> 00:00:18,160
can affect the same element at the same time.

6
00:00:18,160 --> 00:00:20,690
And the link is a great example.

7
00:00:20,690 --> 00:00:22,620
If I inspect this,

8
00:00:22,620 --> 00:00:26,380
we can see that certainly our own rule here,

9
00:00:26,380 --> 00:00:28,510
is having an effect here.

10
00:00:28,510 --> 00:00:31,170
But we also see that there is some default styling

11
00:00:31,170 --> 00:00:32,200
by the browser.

12
00:00:32,200 --> 00:00:36,350
Whilst we are overriding two of those free default styles,

13
00:00:36,350 --> 00:00:40,650
this cursor style, for example, is still affecting the link.

14
00:00:40,650 --> 00:00:43,650
And that is a style which you could also override,

15
00:00:43,650 --> 00:00:46,920
which just controls which mouse cursor we have

16
00:00:46,920 --> 00:00:50,280
when we move our mouse over this link.

17
00:00:50,280 --> 00:00:52,130
But here, I'm fine with the default,

18
00:00:52,130 --> 00:00:54,670
so I'll not change this.

19
00:00:54,670 --> 00:00:57,510
But we got two different rules,

20
00:00:57,510 --> 00:00:59,780
this default rule and our own rule

21
00:00:59,780 --> 00:01:02,720
applied to that link at the same time.

22
00:01:02,720 --> 00:01:04,580
And if we hover over this link,

23
00:01:04,580 --> 00:01:07,630
there's even another rule having an effect on it.

24
00:01:07,630 --> 00:01:09,940
We can see this here in the DevTools as well,

25
00:01:09,940 --> 00:01:12,830
if you click here on Toggle Element State,

26
00:01:12,830 --> 00:01:14,410
and you choose hover,

27
00:01:14,410 --> 00:01:16,790
then it also shows you all the rules

28
00:01:16,790 --> 00:01:18,800
that have an effect on the element

29
00:01:18,800 --> 00:01:20,370
when you're hovering over it.

30
00:01:20,370 --> 00:01:23,570
And then you see that this hover rule

31
00:01:23,570 --> 00:01:26,440
also would have an effect on that link.

32
00:01:26,440 --> 00:01:30,370
Of course it has, because we added it for this reason.

33
00:01:30,370 --> 00:01:34,250
But with that, we see that we have three different rules

34
00:01:34,250 --> 00:01:39,250
that have a direct impact, a direct effect on this link.

35
00:01:39,730 --> 00:01:42,810
And we actually even have some other effects,

36
00:01:42,810 --> 00:01:45,210
for example, the paragraph rule,

37
00:01:45,210 --> 00:01:47,200
which also affects the link,

38
00:01:47,200 --> 00:01:49,850
because it is inside of a paragraph,

39
00:01:49,850 --> 00:01:52,270
and hence it also gets the font family

40
00:01:52,270 --> 00:01:54,800
of the paragraph, for example.

41
00:01:54,800 --> 00:01:57,260
And we're going to dig a bit deeper into that

42
00:01:57,260 --> 00:01:58,850
later in the course.

43
00:01:58,850 --> 00:02:01,670
But I already want to bring it up here.

44
00:02:01,670 --> 00:02:04,260
That's why it's called Cascading Style Sheets,

45
00:02:04,260 --> 00:02:07,140
because we can have multiple CSS rules

46
00:02:07,140 --> 00:02:09,830
that affect one and the same element.

47
00:02:09,830 --> 00:02:11,850
And again, we're diving way deeper

48
00:02:11,850 --> 00:02:14,290
into that a little bit later in the course

49
00:02:14,290 --> 00:02:18,320
when we also evaluate how styles override each other.

50
00:02:18,320 --> 00:02:19,980
But that's already something

51
00:02:19,980 --> 00:02:22,993
which is worth noting at this point already.