All language subtitles for 003 Inline, Internal and External CSS_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.