1
00:00:02,210 --> 00:00:05,250
Now that we're adding more and more styles,

2
00:00:05,250 --> 00:00:07,360
this style element here

3
00:00:07,360 --> 00:00:09,190
is getting bigger and bigger

4
00:00:09,190 --> 00:00:11,490
in this HTML document.

5
00:00:11,490 --> 00:00:13,740
Of course, I'm also zoomed in quite a bit here

6
00:00:13,740 --> 00:00:15,380
to make the code more readable,

7
00:00:15,380 --> 00:00:17,883
but even if I zoom out a bit temporarily,

8
00:00:17,883 --> 00:00:20,920
you see this is getting longer and longer.

9
00:00:20,920 --> 00:00:24,910
And especially this style part is growing and growing.

10
00:00:24,910 --> 00:00:28,410
And that's not bad; that's totally normal.

11
00:00:28,410 --> 00:00:30,360
But it's also therefore totally normal

12
00:00:30,360 --> 00:00:33,980
that we want to outsource this into a separate file.

13
00:00:33,980 --> 00:00:36,260
That we want to put our style definitions

14
00:00:36,260 --> 00:00:41,260
into a separate file, which we then just add and merge

15
00:00:41,310 --> 00:00:44,020
into this file, so to say.

16
00:00:44,020 --> 00:00:46,750
And that is something which is officially supported

17
00:00:46,750 --> 00:00:49,433
by browsers and by HTML.

18
00:00:50,450 --> 00:00:53,480
We can create a new file here

19
00:00:53,480 --> 00:00:54,750
by clicking on this icon

20
00:00:54,750 --> 00:00:57,350
or using the new file shortcut,

21
00:00:57,350 --> 00:01:00,530
and then give this file a name of our choice.

22
00:01:00,530 --> 00:01:04,973
For example, daily-challenge.css.

23
00:01:06,360 --> 00:01:10,280
We could also name it, styles.css,

24
00:01:10,280 --> 00:01:14,010
or site.css, whatever we want.

25
00:01:14,010 --> 00:01:16,853
But I'll stick to daily challenge CSS.

26
00:01:17,700 --> 00:01:21,240
And now this fall has to end with .css.

27
00:01:21,240 --> 00:01:23,180
And when it ends like that,

28
00:01:23,180 --> 00:01:26,830
you can put your CSS code right into that file.

29
00:01:26,830 --> 00:01:28,450
So we can go to index HTML

30
00:01:28,450 --> 00:01:31,500
and grab all that CSS code here

31
00:01:31,500 --> 00:01:33,040
between the style tags,

32
00:01:33,040 --> 00:01:35,620
without the style tags, though.

33
00:01:35,620 --> 00:01:39,210
So just the code itself, the CSS code itself.

34
00:01:39,210 --> 00:01:42,913
Cut it and add it here in daily challenge CSS.

35
00:01:45,970 --> 00:01:49,870
Now, if we do this and I save all files,

36
00:01:49,870 --> 00:01:52,370
if I reload, the styles are lost.

37
00:01:52,370 --> 00:01:55,370
Because just because we added an extra file,

38
00:01:55,370 --> 00:02:00,130
does not mean that this file gets used by the browser.

39
00:02:00,130 --> 00:02:03,740
The browser still only loads the HTML file.

40
00:02:03,740 --> 00:02:06,400
And in this file, we have no reference

41
00:02:06,400 --> 00:02:08,759
to that extra CSS file.

42
00:02:08,759 --> 00:02:11,350
Just because it lives in the same directory,

43
00:02:11,350 --> 00:02:13,310
does not mean that the browser

44
00:02:13,310 --> 00:02:15,590
automatically applies it.

45
00:02:15,590 --> 00:02:18,190
Instead, we explicitly have to state

46
00:02:18,190 --> 00:02:20,890
that we want to use this CSS file

47
00:02:20,890 --> 00:02:24,990
for styling the elements in this HTML file.

48
00:02:24,990 --> 00:02:29,870
And we do this with help of another meta HTML element,

49
00:02:29,870 --> 00:02:31,830
not the style element,

50
00:02:31,830 --> 00:02:35,473
but instead, the link element.

51
00:02:36,700 --> 00:02:40,750
The link element is added like this.

52
00:02:40,750 --> 00:02:43,130
And the special thing about the link element

53
00:02:43,130 --> 00:02:46,900
is that it has no closing element,

54
00:02:46,900 --> 00:02:48,910
no closing tag.

55
00:02:48,910 --> 00:02:52,260
Instead, this is a so-called "white" element

56
00:02:52,260 --> 00:02:54,990
because it actually has no content

57
00:02:54,990 --> 00:02:57,460
between the opening and closing tag.

58
00:02:57,460 --> 00:03:00,860
And hence, there is no closing tag.

59
00:03:00,860 --> 00:03:02,860
Instead, such white elements,

60
00:03:02,860 --> 00:03:04,560
like the link element is,

61
00:03:04,560 --> 00:03:07,670
are configured with attributes only.

62
00:03:07,670 --> 00:03:09,660
And we don't have a lot of white elements,

63
00:03:09,660 --> 00:03:12,900
but there are a few and they are always white

64
00:03:12,900 --> 00:03:15,170
because they just don't need any content

65
00:03:15,170 --> 00:03:16,850
between the tags.

66
00:03:16,850 --> 00:03:18,970
Instead, here link is configured

67
00:03:18,970 --> 00:03:21,040
with attributes only,

68
00:03:21,040 --> 00:03:23,090
and the attribute which it needs

69
00:03:23,090 --> 00:03:26,200
is the href attribute,

70
00:03:26,200 --> 00:03:29,630
just like the anchor tag had a href attribute.

71
00:03:29,630 --> 00:03:31,390
But link does something different.

72
00:03:31,390 --> 00:03:33,960
And it can be easy to confuse those two

73
00:03:33,960 --> 00:03:37,300
because link also sounds like it would create a link,

74
00:03:37,300 --> 00:03:38,590
which we could click,

75
00:03:38,590 --> 00:03:40,170
but that's not what happens.

76
00:03:40,170 --> 00:03:43,010
Instead it creates a link to another file,

77
00:03:43,010 --> 00:03:44,770
which will then be included,

78
00:03:44,770 --> 00:03:47,480
or which will be used,

79
00:03:47,480 --> 00:03:51,470
when this file is being parsed by the browser as well.

80
00:03:51,470 --> 00:03:54,840
So it links this HTML file to another file

81
00:03:54,840 --> 00:03:58,550
and then both files together will be evaluated

82
00:03:58,550 --> 00:04:00,170
and parsed by the browser.

83
00:04:00,170 --> 00:04:03,290
It does not create a clickable link.

84
00:04:03,290 --> 00:04:06,100
So it's really just some random fact

85
00:04:06,100 --> 00:04:09,740
that link also has a attribute called href

86
00:04:09,740 --> 00:04:14,740
for defining a path to file this HTML file

87
00:04:15,020 --> 00:04:16,452
should be linked to.

88
00:04:17,600 --> 00:04:20,769
And to be precise, it can be a relative path.

89
00:04:20,769 --> 00:04:24,190
So seen relative from this HTML file,

90
00:04:24,190 --> 00:04:26,550
and therefore since daily challenge CSS

91
00:04:26,550 --> 00:04:29,850
is a sibling file to this index HTML file,

92
00:04:29,850 --> 00:04:34,330
we can just specify this daily challenge.CSS file name

93
00:04:34,330 --> 00:04:36,250
as a value for href here,

94
00:04:36,250 --> 00:04:39,320
and that will then link this HTML file

95
00:04:39,320 --> 00:04:41,203
to this CSS file.

96
00:04:42,340 --> 00:04:44,940
Now, there's just one other extra attribute

97
00:04:44,940 --> 00:04:46,040
which we have to add,

98
00:04:46,040 --> 00:04:49,200
and that's the rel attribute.

99
00:04:49,200 --> 00:04:51,830
That defines the kind of relationship

100
00:04:51,830 --> 00:04:53,670
we're creating here with this link.

101
00:04:53,670 --> 00:04:56,900
And here we should set the value to style sheet,

102
00:04:56,900 --> 00:04:59,580
telling the browser that what we import here

103
00:04:59,580 --> 00:05:03,750
will be a file full of CSS style definitions.

104
00:05:03,750 --> 00:05:05,300
You could argue that this is clear

105
00:05:05,300 --> 00:05:07,160
because of the file extension,

106
00:05:07,160 --> 00:05:09,550
but the browser doesn't look at the extension

107
00:05:09,550 --> 00:05:11,910
and then guess what should be in the file.

108
00:05:11,910 --> 00:05:15,760
Instead you have to explicitly set this kind of relation.

109
00:05:15,760 --> 00:05:17,860
Though I will say right away that

110
00:05:17,860 --> 00:05:22,860
this is the most common type of link you'll create:

111
00:05:22,860 --> 00:05:25,310
a link to another style sheet.

112
00:05:25,310 --> 00:05:28,420
But we'll see other ways of importing our files

113
00:05:28,420 --> 00:05:32,560
into this HTML file a little bit later in the course.

114
00:05:32,560 --> 00:05:34,990
So this now creates a link to this style sheet

115
00:05:34,990 --> 00:05:38,190
and ensures that those styles will be used

116
00:05:38,190 --> 00:05:42,740
when this HTML file is being parsed by the browser.

117
00:05:42,740 --> 00:05:44,670
So if we now save this and reload,

118
00:05:44,670 --> 00:05:46,130
we got our styles back.

119
00:05:46,130 --> 00:05:48,290
But now they live in a separate file

120
00:05:48,290 --> 00:05:50,630
and therefore we're back to a more readable

121
00:05:50,630 --> 00:05:53,710
and more manageable HTML file.

122
00:05:53,710 --> 00:05:56,410
And as a developer, that's always our goal.

123
00:05:56,410 --> 00:05:59,630
We want to keep our code maintainable and manageable.

124
00:05:59,630 --> 00:06:01,650
And of course, for bigger websites,

125
00:06:01,650 --> 00:06:04,230
it will grow automatically.

126
00:06:04,230 --> 00:06:05,920
It will become bigger and bigger,

127
00:06:05,920 --> 00:06:09,980
but especially outsourcing non-HTML content,

128
00:06:09,980 --> 00:06:12,910
like CSS rules, into a separate file

129
00:06:12,910 --> 00:06:15,420
is a good and common practice,

130
00:06:15,420 --> 00:06:18,610
which you should consider using for your websites

131
00:06:18,610 --> 00:06:21,423
and your styles on your websites, as well.