WEBVTT

0
00:00.320 --> 00:07.310
Now, I hope you had to play around with this example website where you could toggle the CSS on and

1
00:07.340 --> 00:08.030
off.

2
00:08.300 --> 00:13.880
How exactly did I add CSS to this plain HTML website?

3
00:14.270 --> 00:17.840
Well, that is what we're going to be learning about in this lesson.

4
00:18.200 --> 00:23.420
There's three ways of adding CSS into an HTML website.

5
00:23.720 --> 00:28.670
Inline, Internal, and External.

6
00:28.940 --> 00:34.580
We're going to be exploring all three of these different styles of adding CSS, and I'm going to show

7
00:34.580 --> 00:39.380
you why they're important and in which situations you would use which one.

8
00:39.800 --> 00:44.840
Now, the first one is the "Inline" style of adding CSS.

9
00:44.870 --> 00:51.170
As the name suggests, it goes into the same line as a particular HTML element.

10
00:51.260 --> 00:58.130
So in this case, you can see we've got an HTML open tag and an HTML closing tag.

11
00:58.280 --> 01:04.640
Now, we know from learning about HTML boilerplate, this is an element that goes into all of our HTML

12
01:04.640 --> 01:05.570
documents.

13
01:05.690 --> 01:08.240
There's nothing special about this particular element.

14
01:08.270 --> 01:12.830
It just tells the browser that this file is made up of HTML.

15
01:13.220 --> 01:21.020
Now, in this case, the inline CSS goes into the opening tag of the HTML.

16
01:21.050 --> 01:24.110
This is where the CSS exists.

17
01:24.140 --> 01:27.830
It's in the same line as the HTML tag.

18
01:28.640 --> 01:34.520
What the inline CSS looks like is something like this.

19
01:34.940 --> 01:44.990
You've got a style attribute, which is an attribute that is globally available to all tags, not just

20
01:45.290 --> 01:47.390
HTML, but anything else.

21
01:47.420 --> 01:51.440
Image, or Break, or anything you can think of,

22
01:51.470 --> 01:54.200
you can add the style attribute to it.

23
01:54.470 --> 01:57.340
As we know, normally attributes look like this.

24
01:57.350 --> 02:01.530
They have a name of the attribute.

25
02:01.560 --> 02:04.440
Then we add the equal sign.

26
02:04.440 --> 02:09.180
And then finally we add a value for the attribute.

27
02:09.930 --> 02:14.400
In this value-section is where we add our CSS code.

28
02:14.700 --> 02:18.210
Our CSS code is broken down like this.

29
02:18.240 --> 02:23.610
The first part of it is the property that you want to change.

30
02:24.810 --> 02:31.650
And the second part is the value of that property that you want to set it to.

31
02:32.400 --> 02:38.130
So in this case, what we're trying to do is to set our website's background to blue.

32
02:38.250 --> 02:46.230
And if I go ahead and run this code and load it up in a browser, you would simply see a website that

33
02:46.230 --> 02:47.700
has a blue background,

34
02:47.880 --> 02:51.600
and this is achieved using our inline CSS.

35
02:52.300 --> 03:01.320
Inline elements are really useful for adding CSS style to just a single element on your HTML page.

36
03:01.330 --> 03:07.720
But normally that's quite cumbersome because as you can imagine, there's tons of different HTML elements.

37
03:07.750 --> 03:13.120
If you have more and more of them and you wanted them to share similar styles, then you would have

38
03:13.120 --> 03:19.720
to add these inline styles to each and every single one of them, which is pretty tedious.

39
03:19.750 --> 03:25.720
It's not normally recommended to use inline styles in your entire document.

40
03:25.720 --> 03:33.100
It's only for specific sections, or when you're testing, or when you only want it in one single element

41
03:33.100 --> 03:35.860
or one line in your HTML document.

42
03:36.190 --> 03:42.100
Now, the second way you can add CSS is through what's called "Internal CSS."

43
03:42.250 --> 03:48.400
Now, this is done through a special HTML tag called the "style element."

44
03:48.430 --> 03:52.550
We've got an open <style> tag and a closing </style> tag,

45
03:52.550 --> 03:58.610
and in between those two lines is where we add all of our CSS.

46
03:58.760 --> 04:02.060
All of this is our CSS.

47
04:02.540 --> 04:08.140
The CSS looks a little bit different from what you saw previously, right?

48
04:08.150 --> 04:11.480
Because previously all we had was this line.

49
04:11.510 --> 04:14.750
Now, in this case, we've got something a little bit extra here,

50
04:14.780 --> 04:16.100
why is that?

51
04:16.130 --> 04:26.060
Well, this is because last time when we had the CSS rule, we had it inline inside a particular element.

52
04:26.060 --> 04:32.420
So we said for this HTML element, we want to apply a background color.

53
04:33.020 --> 04:40.790
Now, in this case, it's a little bit different because our internal style can apply to anywhere within

54
04:40.790 --> 04:43.010
the same HTML document.

55
04:43.010 --> 04:49.400
So it could go into any of these elements, the HTML or the head or anything that you've got coming

56
04:49.400 --> 04:50.930
up later on as well.

57
04:51.110 --> 05:00.040
What we have to add in addition is what we call a "Selector," and this selector comes before a

58
05:00.040 --> 05:07.300
set of curly braces and then the CSS goes in between these two sets of curly braces.

59
05:07.510 --> 05:15.310
Now, when I say in between a set of curly braces, you have to imagine it a little bit like this.

60
05:15.310 --> 05:19.450
This is the opening curly brace, and this is the closing curly brace.

61
05:19.450 --> 05:28.090
And if you had it all on one line, then it would look something like this with your CSS going in between

62
05:28.090 --> 05:29.780
on multiple lines,

63
05:29.800 --> 05:34.030
that's why we open and close them on separate lines

64
05:34.030 --> 05:38.620
but if you imagine it as one line, then it would look something like this.

65
05:39.550 --> 05:49.660
Our internal styling can apply to anywhere in our HTML document, and inside we can target or select

66
05:49.660 --> 05:51.730
as many elements as we want.

67
05:51.760 --> 05:59.450
We could say let's apply the background red to the HTML, and when this code is rendered in the browser,

68
05:59.450 --> 06:03.500
you will see the background of the entire HTML turn red.

69
06:03.950 --> 06:10.700
Internal styles are really useful for applying it only to one HTML document.

70
06:10.700 --> 06:18.200
As you can see, this style and any code that goes in there is limited to the HTML that it sits in.

71
06:18.200 --> 06:25.690
So it means if you have a multi-page website, then you probably shouldn't be using the internal style,

72
06:25.700 --> 06:31.610
instead, you should be using something called an "External CSS styling".

73
06:31.700 --> 06:39.290
Now the biggest difference between the external, and the internal, and inline styles is that this actually

74
06:39.290 --> 06:47.900
lives in a completely separate file, which you'll normally see as styles.css or main.css or anything

75
06:47.900 --> 06:57.290
that has a .css extension. Inside this CSS file is where we write our CSS rules.

76
06:57.290 --> 07:04.430
So we've got our selector, we've got our property and we've got values and we can make many, many

77
07:04.430 --> 07:06.350
of these inside this file.

78
07:06.500 --> 07:12.950
Now how do we link up the style sheet file with our index.html?

79
07:13.130 --> 07:22.970
Well, inside the head section of our HTML, we would add a link element which you'll notice is a self-closing

80
07:23.000 --> 07:23.390
tag,

81
07:23.390 --> 07:25.850
so it doesn't need a closing tag.

82
07:25.940 --> 07:29.000
And we have two things that we normally write.

83
07:29.030 --> 07:38.510
One which is a relationship (rel) which refers to what is the role of this thing that we're linking to.

84
07:38.840 --> 07:45.320
And the second thing is the href, which is where is it located?

85
07:45.890 --> 07:51.500
In this case, we're saying it's in the same directory and it's inside a file called styles.css

86
07:52.170 --> 07:56.430
which points to this file right here.

87
07:56.430 --> 08:04.590
And when we go ahead and run this and show it in the browser, you'll see it turns our HTML background

88
08:04.590 --> 08:06.810
to a green color.

89
08:06.930 --> 08:13.320
And this style of external CSS is what's used most commonly in web development.

90
08:13.320 --> 08:16.710
And this is what we're going to be focusing on most of the time.

91
08:16.710 --> 08:24.540
But it's important to be aware of the other two styles the inline, the internal, because you'll see

92
08:24.540 --> 08:27.980
it out there in the wild in other people's CSS code.

93
08:27.990 --> 08:34.170
So remember, inline is really useful when you only want to target a single element,

94
08:34.860 --> 08:40.590
and internal is really useful when you only want to target a single web page.

95
08:41.730 --> 08:49.290
But for most cases and when you have a multi-page website, then what you're going to need is the external

96
08:49.290 --> 08:56.950
way of adding CSS through the use of a separate file, which will be called something, something.css.

97
08:56.980 --> 09:05.170
And it's inside this file where you're going to be writing the CSS code that can target an entire

98
09:05.170 --> 09:09.070
website with all of its multiple web pages.

99
09:09.640 --> 09:14.950
So these are the three ways that you can add CSS to your HTML documents.

100
09:14.950 --> 09:20.500
And don't worry, we're going to be practicing this and all of its forms many, many times so that you

101
09:20.500 --> 09:22.660
understand how it works.

102
09:23.290 --> 09:30.340
Let's try an exercise and see how to add CSS in various different ways to our HTML file.

103
09:31.430 --> 09:31.790
All right.

104
09:31.790 --> 09:38.930
So once you've downloaded and extracted the project file and opened it inside VS Code, you should see

105
09:38.930 --> 09:40.250
this folder.

106
09:40.250 --> 09:45.880
And here, notice that our five files that have already been created for you.

107
09:45.890 --> 09:52.190
And in this exercise, there is a little bit of revision about creating multiple web pages, about file

108
09:52.190 --> 09:52.820
paths,

109
09:52.820 --> 10:00.800
but more importantly, we want you to practice using the three different ways of adding CSS: inline,

110
10:01.100 --> 10:03.800
internal and external.

111
10:03.800 --> 10:10.700
So starting inside index.html, the first thing I want you to do is to create three links to the three

112
10:10.700 --> 10:12.260
different web pages.

113
10:12.650 --> 10:16.040
This one, this one, and this one.

114
10:16.040 --> 10:21.140
And once you've done that, then you can go inside each of those web pages.

115
10:21.140 --> 10:27.380
So starting with the inline and then internal or external, and you're going to follow the instruction

116
10:27.380 --> 10:29.040
that the h1 tells you to.

117
10:29.060 --> 10:38.010
So in this case, we want to use inline styling in order to style this h1 in blue. And then you get

118
10:38.010 --> 10:44.130
to go to the internal and do the same thing, but this time using internal styling and styling the h1

119
10:44.130 --> 10:52.800
in red and then finally using external styling using this style.css file and styling the h1 in

120
10:52.800 --> 10:53.610
green.

121
10:53.700 --> 10:59.430
If you want to take a look at what the final outcome will look like, you can go into the Solution folder,

122
10:59.430 --> 11:05.670
right-click on the solution.html and Show Preview. And then make sure that you collapse this solution

123
11:05.670 --> 11:06.030
folder

124
11:06.030 --> 11:10.920
because having all of it out, two versions of each file is very confusing.

125
11:10.920 --> 11:16.290
So I recommend just collapsing that folder so you don't get confused and this is what you're aiming

126
11:16.290 --> 11:19.380
for on the index.html, which is the home page.

127
11:19.380 --> 11:22.320
We've got an h1 and then we've got three links.

128
11:22.320 --> 11:28.260
And if we click on each of these, you can see they've got an h1 that says style me in blue, style

129
11:28.260 --> 11:34.740
me in red, and green, and we're going to achieve that using the three different ways of adding CSS.

130
11:34.920 --> 11:41.190
Once you're ready, go ahead and download the starting files and give this challenge a go.

131
11:41.550 --> 11:42.750
Pause the video now.

132
11:45.230 --> 11:45.560
All right.

133
11:45.560 --> 11:46.760
So how did that go?

134
11:46.790 --> 11:51.620
I'm going to run through the solution code with you to explain some of the things that you would need

135
11:51.620 --> 11:53.420
to do to complete this challenge.

136
11:53.450 --> 11:57.770
The first thing we said was to style the home page.

137
11:57.770 --> 12:02.650
So we added in three anchor tags, which is how we create links,

138
12:02.660 --> 12:11.300
and once we did that, we were able to use the href of each of the anchor tags in order to link to the

139
12:11.300 --> 12:13.550
relevant web page.

140
12:13.580 --> 12:22.130
The first one links to the inline web page, inline.html, internal, external, and we use the ./

141
12:22.130 --> 12:26.600
notation in order to reach within the current folder.

142
12:26.600 --> 12:29.630
So solution.html lives inside solution,

143
12:29.630 --> 12:34.910
and in this case, in order to get to inline.html, we use the ./ to get to this folder and

144
12:34.910 --> 12:39.800
then we forward slash to go to inline.html right here.

145
12:41.120 --> 12:48.720
Now once you've created your three links, the next stage is to go into the first web page, inline, and

146
12:48.720 --> 12:54.390
here we want to style the h1 using CSS, but adding it inline.

147
12:54.510 --> 13:03.840
As I said, it's in the literal line of the h1 element, so it only applies to this h1 element and we've

148
13:03.840 --> 13:12.900
added it in right here saying that the style should be set so that the color of this text is blue.

149
13:13.530 --> 13:23.190
And remember that the inline style goes in the opening tag of the element that you want to target.

150
13:24.630 --> 13:34.470
The next one is Internal, so we add internal styling, usually by putting it inside the head section.

151
13:34.470 --> 13:41.790
So between the open and closing tags of the head element, and this is a convention that most developers

152
13:41.790 --> 13:46.770
will stick to, although this will work no matter where you put the style element.

153
13:46.920 --> 13:54.240
So here we've got an open and closing style tag and in between we've added in our CSS.

154
13:54.240 --> 14:01.590
So we're saying that our selector is going to select all the h1 on this page, of which there is only

155
14:01.590 --> 14:05.550
one, and we're going to change its text color to red.

156
14:05.880 --> 14:11.400
And finally, we've got the final version, which is the External HTML.

157
14:11.400 --> 14:19.410
And we do this by creating a link element right again, inside the head section of your website.

158
14:19.440 --> 14:27.450
We establish the relationship (rel) is we're setting up a style sheet and then we provide a href to the location

159
14:27.450 --> 14:33.840
where our stylesheet is located, which is in the current directory, and then it's in a file called

160
14:33.840 --> 14:35.310
style.css.

161
14:35.310 --> 14:38.310
So we can see that right here.

162
14:39.030 --> 14:46.950
And inside here we've again targeted the h1 and we've set the color to green. And all of that together

163
14:46.950 --> 14:55.470
creates these different web pages in our multi-page website with the code that sets the style in three

164
14:55.470 --> 14:56.670
different ways.

165
14:56.670 --> 14:58.270
So did you get that right?

166
14:58.290 --> 15:04.710
If you had any issues at all, be sure to go back into your code and fix anything that was wrong and

167
15:04.710 --> 15:09.030
make sure that you've understood the three different ways of adding CSS.

168
15:09.510 --> 15:14.910
In the next lesson, we're going to learn more about the different selectors that we can use to select

169
15:14.910 --> 15:17.220
different parts of our HTML file.

170
15:17.220 --> 15:19.920
So for all of that and more, I'll see you there.