Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,560 --> 00:00:05,430
There are three places where we can write CSS
2
00:00:05,430 --> 00:00:10,430
and we call them inline CSS, internal CSS, and external CSS.
3
00:00:11,800 --> 00:00:13,550
And so let's now learn about
4
00:00:13,550 --> 00:00:16,300
these three different types of CSS
5
00:00:16,300 --> 00:00:18,763
and also which one is the best.
6
00:00:20,350 --> 00:00:23,520
And in this section, and also the next one,
7
00:00:23,520 --> 00:00:26,860
we will actually keep working on this same project
8
00:00:26,860 --> 00:00:29,910
that we started building in the last section.
9
00:00:29,910 --> 00:00:33,920
So the section about the introduction to HTML
10
00:00:33,920 --> 00:00:36,980
and remember that this is how we left
11
00:00:36,980 --> 00:00:40,080
the project after that last section.
12
00:00:40,080 --> 00:00:43,480
And now by the end of this first CSS section,
13
00:00:43,480 --> 00:00:45,910
it will look like this.
14
00:00:45,910 --> 00:00:48,860
So that's completely different, right?
15
00:00:48,860 --> 00:00:51,320
So we have a lot of colors here,
16
00:00:51,320 --> 00:00:54,483
we have this color border at the top.
17
00:00:55,570 --> 00:00:58,520
The font is also completely different.
18
00:00:58,520 --> 00:01:02,820
So the text color also changed,
19
00:01:02,820 --> 00:01:06,750
and yeah, here we have some nice background colors.
20
00:01:06,750 --> 00:01:08,730
We even have this button here,
21
00:01:08,730 --> 00:01:10,743
floating here on the right side.
22
00:01:12,000 --> 00:01:15,410
And so yeah, a lot of visual styles
23
00:01:15,410 --> 00:01:17,920
are going to be applied through the page
24
00:01:17,920 --> 00:01:19,410
throughout this section.
25
00:01:19,410 --> 00:01:23,770
And you will learn a lot of CSS by building this project.
26
00:01:23,770 --> 00:01:26,670
Okay, now I like to keep one folder
27
00:01:26,670 --> 00:01:29,020
for each of these sections.
28
00:01:29,020 --> 00:01:31,310
And so I will now go to my desktop
29
00:01:31,310 --> 00:01:35,840
and create a brand new project folder for this section.
30
00:01:35,840 --> 00:01:37,760
So what I'm going to do is this time,
31
00:01:37,760 --> 00:01:40,680
I will not go into this folder,
32
00:01:40,680 --> 00:01:43,610
which is the code that we downloaded from GitHub,
33
00:01:43,610 --> 00:01:47,530
but instead, what I will do is to simply copy
34
00:01:47,530 --> 00:01:49,573
this project from the last section.
35
00:01:51,250 --> 00:01:56,250
Okay, and then I will call it 03 and CSS fundamentals.
36
00:01:59,720 --> 00:02:02,280
And so the starting point for this section
37
00:02:02,280 --> 00:02:05,410
is the final code of the last section.
38
00:02:05,410 --> 00:02:07,170
So I hope that makes sense,
39
00:02:07,170 --> 00:02:10,550
but if you feel like just working in the same folder,
40
00:02:10,550 --> 00:02:13,160
that is of course, absolutely no problem.
41
00:02:13,160 --> 00:02:15,210
So you can just keep writing code
42
00:02:15,210 --> 00:02:17,570
exactly in the same documents
43
00:02:17,570 --> 00:02:20,570
that we have been working on in the last section.
44
00:02:20,570 --> 00:02:23,040
I'm just doing it like this, so that in the end,
45
00:02:23,040 --> 00:02:26,723
I can give you all the code organized nicely.
46
00:02:27,920 --> 00:02:32,920
Okay, so I will now close this window here
47
00:02:34,470 --> 00:02:36,390
and we can right click for example here
48
00:02:36,390 --> 00:02:39,680
on VS code and say new window
49
00:02:41,000 --> 00:02:42,983
and then open the folder from here.
50
00:02:44,210 --> 00:02:48,930
So on the desktop, it is this that I just created,
51
00:02:48,930 --> 00:02:52,843
open it and then as always I'm pushing it to the left side.
52
00:02:54,000 --> 00:02:57,690
Now we can put this here on the other side,
53
00:02:57,690 --> 00:03:01,010
but later we will need a bit more space
54
00:03:01,010 --> 00:03:03,520
because you'll see that there was some space here
55
00:03:03,520 --> 00:03:05,550
before, right.
56
00:03:05,550 --> 00:03:08,660
And so with this layout, just being on the right side,
57
00:03:08,660 --> 00:03:10,283
there is not enough for that,
58
00:03:11,300 --> 00:03:13,250
but for now that doesn't really matter.
59
00:03:15,360 --> 00:03:17,560
Now, this one that we had before,
60
00:03:17,560 --> 00:03:20,060
now since we closed that window,
61
00:03:20,060 --> 00:03:21,480
it will no longer work.
62
00:03:21,480 --> 00:03:23,720
So if I reload here now,
63
00:03:23,720 --> 00:03:26,780
Google Chrome tells me that the site can't be reached,
64
00:03:26,780 --> 00:03:28,340
so I can just close this
65
00:03:29,200 --> 00:03:32,190
and I can then again click here
66
00:03:32,190 --> 00:03:35,130
on go live now in this new window.
67
00:03:35,130 --> 00:03:39,690
Okay, so in this new project, which is actually the same,
68
00:03:39,690 --> 00:03:41,400
but it is a new project folder
69
00:03:41,400 --> 00:03:45,300
and so for VS code it is like a new project.
70
00:03:45,300 --> 00:03:48,743
So if I click now on go live, it should start again.
71
00:03:49,740 --> 00:03:53,210
And so here is the way we left the project
72
00:03:53,210 --> 00:03:54,760
after the last section,
73
00:03:54,760 --> 00:03:57,600
which is the starting point of this new one.
74
00:03:57,600 --> 00:04:02,600
Great, but now let's finally get started with some CSS.
75
00:04:02,910 --> 00:04:07,910
Right, so remember there were three ways of writing CSS
76
00:04:08,500 --> 00:04:11,710
and the first one was inline CSS.
77
00:04:11,710 --> 00:04:15,380
So let me start by showing you how inline CSS works.
78
00:04:15,380 --> 00:04:18,277
And inline CSS is basically just writing
79
00:04:18,277 --> 00:04:23,277
the CSS code inside, essentially of the element.
80
00:04:23,690 --> 00:04:27,580
So let's say that we wanted to style this text here, blue.
81
00:04:27,580 --> 00:04:30,800
So this H1, we could declare
82
00:04:30,800 --> 00:04:34,330
the style attribute like this,
83
00:04:34,330 --> 00:04:37,740
and then inside of this HTML element
84
00:04:37,740 --> 00:04:40,140
and inside of this HTML file,
85
00:04:40,140 --> 00:04:42,823
we would then start writing our CSS.
86
00:04:43,730 --> 00:04:48,370
So we can say color and then set it to blue.
87
00:04:48,370 --> 00:04:50,010
If I give it a save,
88
00:04:50,010 --> 00:04:52,983
then you see that it turned actually blue.
89
00:04:53,820 --> 00:04:56,590
So this worked, right?
90
00:04:56,590 --> 00:05:01,590
However, inline styles should usually never be used, okay.
91
00:05:02,220 --> 00:05:03,850
I'm just showing this to you
92
00:05:03,850 --> 00:05:07,530
so that if in some case you see this here
93
00:05:07,530 --> 00:05:10,160
on some other code and some other webpage,
94
00:05:10,160 --> 00:05:11,830
then you know what it is,
95
00:05:11,830 --> 00:05:15,500
but you should not use it when you code on your own.
96
00:05:15,500 --> 00:05:18,840
So when you build your own web pages or websites,
97
00:05:18,840 --> 00:05:21,143
then don't do this, okay.
98
00:05:22,550 --> 00:05:26,350
And so let's now move on to the second way of writing CSS,
99
00:05:26,350 --> 00:05:29,640
which is called internal CSS.
100
00:05:29,640 --> 00:05:31,300
So with internal CSS,
101
00:05:31,300 --> 00:05:33,730
we come here to the head
102
00:05:33,730 --> 00:05:38,290
and then we declare a style element.
103
00:05:38,290 --> 00:05:40,430
So style,
104
00:05:40,430 --> 00:05:43,890
and then we can write our CSS right here
105
00:05:43,890 --> 00:05:46,340
into the style element.
106
00:05:46,340 --> 00:05:49,370
So basically this entire page is HTML,
107
00:05:49,370 --> 00:05:52,840
but everything that is inside this style element
108
00:05:52,840 --> 00:05:57,260
that needs to be inside of the head will be CSS.
109
00:05:57,260 --> 00:05:59,650
And for now let's write something very similar
110
00:05:59,650 --> 00:06:02,840
to what we wrote by the end of the last video.
111
00:06:02,840 --> 00:06:05,490
So remember that we always need to start
112
00:06:05,490 --> 00:06:07,470
with a selector
113
00:06:07,470 --> 00:06:09,790
because in this case we are not going to write
114
00:06:09,790 --> 00:06:13,200
the code directly on the H1 element.
115
00:06:13,200 --> 00:06:16,300
And so our CSS needs a way of knowing
116
00:06:16,300 --> 00:06:20,230
what element we actually want to style, right?
117
00:06:20,230 --> 00:06:22,223
So we can select it like this,
118
00:06:23,110 --> 00:06:26,130
and then we start our declaration block.
119
00:06:26,130 --> 00:06:28,690
And again that is what we talked about
120
00:06:28,690 --> 00:06:30,613
by the end of the last lecture.
121
00:06:31,630 --> 00:06:34,300
And so now here, we can write a style,
122
00:06:34,300 --> 00:06:38,440
so a declaration, which is just a property
123
00:06:38,440 --> 00:06:40,830
in this case the color property.
124
00:06:40,830 --> 00:06:44,360
And then we specify the blue value for it,
125
00:06:44,360 --> 00:06:47,260
and if we now save it and reload,
126
00:06:47,260 --> 00:06:51,180
then you see that once again, the code turned blue here,
127
00:06:51,180 --> 00:06:55,420
so this entire text just became blue.
128
00:06:55,420 --> 00:06:59,140
Great, so this is already a huge step forward
129
00:06:59,140 --> 00:07:02,330
because now we decoupled the style,
130
00:07:02,330 --> 00:07:07,330
which is all of this here from the actual HTML element.
131
00:07:07,730 --> 00:07:11,280
So before as we had to style here,
132
00:07:11,280 --> 00:07:13,370
then the CSS and the HTML,
133
00:07:13,370 --> 00:07:15,200
were kind of entangled,
134
00:07:15,200 --> 00:07:18,250
and that is never a good thing in programming,
135
00:07:18,250 --> 00:07:22,430
and so we want to keep these things in separate places,
136
00:07:22,430 --> 00:07:25,730
we also call it the separation of concerns.
137
00:07:25,730 --> 00:07:28,810
And so now we have, our style here.
138
00:07:28,810 --> 00:07:30,780
So everything up in the head,
139
00:07:30,780 --> 00:07:33,930
and the elements down here separated.
140
00:07:33,930 --> 00:07:37,380
However, if we have a lot of CSS code,
141
00:07:37,380 --> 00:07:39,930
then that is also not really practical.
142
00:07:39,930 --> 00:07:43,960
So imagine we have like 500 lines of CSS code
143
00:07:43,960 --> 00:07:46,840
and then that is actually not uncommon.
144
00:07:46,840 --> 00:07:47,880
And so in that case,
145
00:07:47,880 --> 00:07:50,530
that would bloat our HTML file
146
00:07:50,530 --> 00:07:53,120
and it would be very hard to navigate it.
147
00:07:53,120 --> 00:07:56,850
And so therefore we can separate things even more
148
00:07:56,850 --> 00:08:01,850
by putting all of our CSS code into a special CSS file.
149
00:08:02,950 --> 00:08:05,300
So let's do that.
150
00:08:05,300 --> 00:08:08,150
So we click here again on new file
151
00:08:09,080 --> 00:08:11,340
and this one here can have any name,
152
00:08:11,340 --> 00:08:14,900
but I like to call it style.css.
153
00:08:14,900 --> 00:08:17,030
Okay, so in HTML,
154
00:08:17,030 --> 00:08:18,930
the first page should usually
155
00:08:18,930 --> 00:08:21,580
always be called index.html,
156
00:08:21,580 --> 00:08:24,560
that's really a convention, but for the CSS file,
157
00:08:24,560 --> 00:08:26,670
you can give it any name that you want,
158
00:08:26,670 --> 00:08:30,313
but again, I like to call it style.css.
159
00:08:31,700 --> 00:08:35,840
Okay, and so this is what we now call external CSS
160
00:08:35,840 --> 00:08:40,590
because we will move now this declaration block
161
00:08:40,590 --> 00:08:44,950
or this rule actually into a completely different file,
162
00:08:44,950 --> 00:08:49,203
and so this CSS is now external to the HTML.
163
00:08:50,210 --> 00:08:53,510
Okay, so we have our style here
164
00:08:53,510 --> 00:08:57,160
and now we no longer need the style in here.
165
00:08:57,160 --> 00:09:00,500
Now, maybe you noticed that as I saved this,
166
00:09:00,500 --> 00:09:03,330
the blue color is actually gone.
167
00:09:03,330 --> 00:09:06,150
So why do you think that is happening?
168
00:09:06,150 --> 00:09:08,810
So why is this text no longer blue
169
00:09:08,810 --> 00:09:11,300
even though we have the exact same code here
170
00:09:11,300 --> 00:09:12,623
as we had before?
171
00:09:13,680 --> 00:09:17,340
Well, the reason is that HTML right now
172
00:09:17,340 --> 00:09:22,340
has no way of knowing that we actually do have a CSS file,
173
00:09:22,490 --> 00:09:25,190
or in other words the HTML file
174
00:09:25,190 --> 00:09:29,690
and the CSS file do not automatically get linked.
175
00:09:29,690 --> 00:09:33,830
So what we need to do is to tell our HTML file,
176
00:09:33,830 --> 00:09:36,780
that there is a CSS file that we want to use
177
00:09:36,780 --> 00:09:39,220
to style the HTML.
178
00:09:39,220 --> 00:09:41,830
So we need to link them together basically,
179
00:09:41,830 --> 00:09:45,700
and we do that once again, here in the HTML head,
180
00:09:45,700 --> 00:09:48,300
because that is exactly where all the information
181
00:09:48,300 --> 00:09:49,633
about the page goes.
182
00:09:50,870 --> 00:09:54,690
And for that, we use the link element.
183
00:09:54,690 --> 00:09:57,270
So that's yet another new element,
184
00:09:57,270 --> 00:09:59,810
and the link element is actually quite confusing
185
00:09:59,810 --> 00:10:02,770
for beginners because many people,
186
00:10:02,770 --> 00:10:04,670
when they start out they might think
187
00:10:04,670 --> 00:10:06,970
that the link element is actually
188
00:10:06,970 --> 00:10:10,100
to create hyperlinks like here,
189
00:10:10,100 --> 00:10:12,530
but that is of course not the case.
190
00:10:12,530 --> 00:10:15,420
So as you know already to create hyperlinks,
191
00:10:15,420 --> 00:10:16,970
we use the anchor tag,
192
00:10:16,970 --> 00:10:20,120
so not the link tag.
193
00:10:20,120 --> 00:10:22,520
So the link element really only has
194
00:10:22,520 --> 00:10:26,973
the only purpose of connecting the HTML to a CSS file.
195
00:10:27,870 --> 00:10:31,223
So here we specify H ref once again,
196
00:10:32,600 --> 00:10:36,730
and then here we need the path to the CSS file.
197
00:10:36,730 --> 00:10:39,907
And so in that case, this is just style.css,
198
00:10:42,790 --> 00:10:44,840
then here it is also good
199
00:10:44,840 --> 00:10:47,980
to specify the rail property
200
00:10:47,980 --> 00:10:50,800
and to tell the HTML ahead of time
201
00:10:50,800 --> 00:10:53,723
that this is a style sheet.
202
00:10:54,910 --> 00:10:56,900
And now when I saved this again,
203
00:10:56,900 --> 00:11:00,760
watch what happens and nice,
204
00:11:00,760 --> 00:11:02,760
our text here is blue again.
205
00:11:02,760 --> 00:11:07,760
And so now we successfully connected our CSS file right here
206
00:11:08,000 --> 00:11:10,560
to our HTML file.
207
00:11:10,560 --> 00:11:13,030
So this is now external CSS,
208
00:11:13,030 --> 00:11:15,280
and it is what we will use throughout the rest
209
00:11:15,280 --> 00:11:16,400
of the course.
210
00:11:16,400 --> 00:11:18,710
And it's also what I advise you to do
211
00:11:18,710 --> 00:11:22,110
for whenever you build your own web pages,
212
00:11:22,110 --> 00:11:26,250
however internal CSS also sometimes has its place,
213
00:11:26,250 --> 00:11:27,980
especially when you just want
214
00:11:27,980 --> 00:11:30,550
to build something small and fast
215
00:11:30,550 --> 00:11:33,080
and want to do everything in the same file.
216
00:11:33,080 --> 00:11:37,790
Then it is perfectly acceptable to create internal CSS
217
00:11:37,790 --> 00:11:42,720
using the style element, remember, so just like this.
218
00:11:42,720 --> 00:11:44,150
But inline CSS,
219
00:11:44,150 --> 00:11:46,720
which is what I showed you in the very beginning.
220
00:11:46,720 --> 00:11:48,960
So adding the style right here,
221
00:11:48,960 --> 00:11:51,660
using the style attribute that is usually
222
00:11:51,660 --> 00:11:53,290
not a good practice,
223
00:11:53,290 --> 00:11:56,230
and so it's not a good idea to do that.
224
00:11:56,230 --> 00:11:59,370
All right, and with this now in place,
225
00:11:59,370 --> 00:12:01,210
we are ready to start learning
226
00:12:01,210 --> 00:12:06,210
our very first couple of CSS properties for styling texts.
227
00:12:06,290 --> 00:12:09,923
And so that is going to be the subject of our next lecture.
16704
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.