1
00:00:02,130 --> 00:00:06,430
Now that we got this correct HTML skeleton,

2
00:00:06,430 --> 00:00:07,520
as it's also called,

3
00:00:07,520 --> 00:00:09,530
this correct HTML structure,

4
00:00:09,530 --> 00:00:11,440
let's continue working on our content

5
00:00:11,440 --> 00:00:13,430
and on styling this content.

6
00:00:13,430 --> 00:00:14,960
And what about this link?

7
00:00:14,960 --> 00:00:17,430
This link still has its default style.

8
00:00:17,430 --> 00:00:20,330
We can, of course, also apply some styling to that link.

9
00:00:20,330 --> 00:00:23,490
And you might be able to guess how that could work.

10
00:00:23,490 --> 00:00:26,350
We could add the style attribute here,

11
00:00:26,350 --> 00:00:28,320
but I don't really wanna do this anymore

12
00:00:28,320 --> 00:00:30,330
for the reasons mentioned before.

13
00:00:30,330 --> 00:00:33,270
Instead, we can add a new CSS role here.

14
00:00:33,270 --> 00:00:35,360
We got one for h1 elements.

15
00:00:35,360 --> 00:00:37,300
We got one for paragraphs.

16
00:00:37,300 --> 00:00:40,910
Now, we can add one for anchor elements

17
00:00:40,910 --> 00:00:43,260
simply by using the element name here.

18
00:00:43,260 --> 00:00:46,960
And that's always how CSS rules work.

19
00:00:46,960 --> 00:00:49,490
When we use this type selector

20
00:00:49,490 --> 00:00:52,750
where we select by HTML element type,

21
00:00:52,750 --> 00:00:57,090
we always just repeat the name of the HTML element

22
00:00:57,090 --> 00:00:58,840
without those angle brackets.

23
00:00:58,840 --> 00:01:00,740
So here a,

24
00:01:00,740 --> 00:01:01,580
and with that,

25
00:01:01,580 --> 00:01:05,000
we target all the anchor elements on our page,

26
00:01:05,000 --> 00:01:07,973
and we can give them a certain look, a certain styling.

27
00:01:08,870 --> 00:01:11,130
Now, which styling do we want here?

28
00:01:11,130 --> 00:01:13,510
We might wanna change the color.

29
00:01:13,510 --> 00:01:16,660
And I also wanna get rid of that underlining,

30
00:01:16,660 --> 00:01:19,853
and not because it's bad, just because I don't want it here.

31
00:01:20,760 --> 00:01:22,310
Now, let's start with the color

32
00:01:22,310 --> 00:01:24,350
because we learned how that worked.

33
00:01:24,350 --> 00:01:26,310
And we learned that we've got different ways

34
00:01:26,310 --> 00:01:28,060
of defining a color,

35
00:01:28,060 --> 00:01:30,670
and it's up to you which approach you prefer,

36
00:01:30,670 --> 00:01:33,550
rgb, hsl or hex codes.

37
00:01:33,550 --> 00:01:35,870
And I will stick to rgb here

38
00:01:35,870 --> 00:01:39,910
and define a color with the rgb function

39
00:01:39,910 --> 00:01:41,990
as it's actually called.

40
00:01:41,990 --> 00:01:44,420
And then here I picked a color in advance,

41
00:01:44,420 --> 00:01:47,950
which has a red value of 167,

42
00:01:47,950 --> 00:01:52,950
the green value to one and the blue value to 78.

43
00:01:53,010 --> 00:01:57,480
And that gives me this plum red color here.

44
00:01:57,480 --> 00:02:00,010
And if we saved this and reload,

45
00:02:00,010 --> 00:02:01,240
it might be a bit hard to see,

46
00:02:01,240 --> 00:02:04,933
but now I have this more reddish color here.

47
00:02:05,810 --> 00:02:07,860
Now, to get rid of the underlining,

48
00:02:07,860 --> 00:02:11,520
we can inspect this and see why it has an underlining.

49
00:02:11,520 --> 00:02:12,970
And if we inspect this

50
00:02:12,970 --> 00:02:17,210
we see it's probably this line of code here,

51
00:02:17,210 --> 00:02:19,460
text decoration underline.

52
00:02:19,460 --> 00:02:21,650
This sounds very much like it's responsible

53
00:02:21,650 --> 00:02:24,100
for the, well, underline.

54
00:02:24,100 --> 00:02:27,140
So if you wanna override this with our own style,

55
00:02:27,140 --> 00:02:29,420
just as we overrode the color,

56
00:02:29,420 --> 00:02:32,160
which is why we have this strike through effect here

57
00:02:32,160 --> 00:02:33,750
for the default color.

58
00:02:33,750 --> 00:02:35,160
If we wanna override it,

59
00:02:35,160 --> 00:02:37,160
we just need to repeat this property

60
00:02:37,160 --> 00:02:39,620
and give it a different value.

61
00:02:39,620 --> 00:02:44,150
So here we can now also set text decoration

62
00:02:44,150 --> 00:02:49,150
and now set this to non to remove the underline effect.

63
00:02:51,770 --> 00:02:53,630
And if we do that and reload,

64
00:02:53,630 --> 00:02:55,130
the underline is gone

65
00:02:55,130 --> 00:02:57,733
and now we just have this colored text.

66
00:02:58,780 --> 00:03:00,840
Now, it would be quite common

67
00:03:00,840 --> 00:03:03,230
that links should change their look

68
00:03:03,230 --> 00:03:06,050
if we hover over them though,

69
00:03:06,050 --> 00:03:09,500
and currently that link always looks the same.

70
00:03:09,500 --> 00:03:13,400
Now, for this we need to dig into another CSS feature.

71
00:03:13,400 --> 00:03:16,440
We don't just have the type selectors here,

72
00:03:16,440 --> 00:03:19,930
we also have so-called pseudo selectors,

73
00:03:19,930 --> 00:03:22,570
which allow us to select an element

74
00:03:22,570 --> 00:03:25,453
when it has a different state, you could say.

75
00:03:26,320 --> 00:03:28,640
And for this, we can add a new rule

76
00:03:28,640 --> 00:03:30,780
where we still type a,

77
00:03:30,780 --> 00:03:35,780
but then also :hover, and then our curly braces.

78
00:03:36,620 --> 00:03:40,030
This applies the hover pseudo selector

79
00:03:40,030 --> 00:03:42,020
on the anchor element,

80
00:03:42,020 --> 00:03:46,230
which means whenever any anchor element on the page

81
00:03:46,230 --> 00:03:48,260
is hovered on.

82
00:03:48,260 --> 00:03:51,700
So if the mouse is hovering over that element,

83
00:03:51,700 --> 00:03:55,700
then we wanna apply the styles defined here.

84
00:03:55,700 --> 00:03:58,260
And here we could set text decoration

85
00:03:58,260 --> 00:04:03,260
to underline, for example, to bring back that underlining,

86
00:04:03,410 --> 00:04:06,003
but only if we're hovering over the link.

87
00:04:07,220 --> 00:04:10,060
So then the link will still have these styles,

88
00:04:10,060 --> 00:04:14,170
but in addition, this style here, if we hover over it.

89
00:04:14,170 --> 00:04:15,210
So then we, again,

90
00:04:15,210 --> 00:04:19,540
override the text decoration and set it back to underline

91
00:04:19,540 --> 00:04:21,810
if we're hovering over the link.

92
00:04:21,810 --> 00:04:24,430
So if we now save this and reload.

93
00:04:24,430 --> 00:04:28,290
If I hover over this link, you see it's now underlined.

94
00:04:28,290 --> 00:04:31,230
And especially the hover pseudo selector

95
00:04:31,230 --> 00:04:34,260
is a super important type of selector,

96
00:04:34,260 --> 00:04:37,810
which you will use all the time when writing CSS code,

97
00:04:37,810 --> 00:04:40,860
because it's very common for links and for buttons

98
00:04:40,860 --> 00:04:42,820
that you wanna change the styling

99
00:04:42,820 --> 00:04:45,340
when the mouse pointer hovers over them.

100
00:04:45,340 --> 00:04:47,763
And that's how you can implement this.