1 00:00:01,310 --> 00:00:05,490 Let's now learn about the very basics of CSS, 2 00:00:05,490 --> 00:00:08,223 and make our webpage look a little bit nicer. 3 00:00:10,020 --> 00:00:12,080 So as you probably already know, 4 00:00:12,080 --> 00:00:14,890 we use CSS to style elements, 5 00:00:14,890 --> 00:00:18,270 and to create a layout for the overall page. 6 00:00:18,270 --> 00:00:20,500 And we can write CSS right here 7 00:00:20,500 --> 00:00:24,510 in the HTML file using the style element. 8 00:00:24,510 --> 00:00:28,400 Okay, and that style element is not for visible content, 9 00:00:28,400 --> 00:00:29,830 here on the page, 10 00:00:29,830 --> 00:00:33,860 and so it would go right here into the head. 11 00:00:33,860 --> 00:00:36,940 Okay, because remember the head is basically, 12 00:00:36,940 --> 00:00:39,650 like for settings of the page. 13 00:00:39,650 --> 00:00:43,253 And the style definitely counts as a setting. 14 00:00:45,640 --> 00:00:46,763 So style, 15 00:00:48,000 --> 00:00:49,520 and now to style elements, 16 00:00:49,520 --> 00:00:51,580 we need to first select them. 17 00:00:51,580 --> 00:00:54,540 And there are different types of selectors in CSS. 18 00:00:54,540 --> 00:00:56,750 And we're gonna learn about a couple of them, 19 00:00:56,750 --> 00:00:58,540 in this video and the next one. 20 00:00:58,540 --> 00:00:59,870 But the most basic one, 21 00:00:59,870 --> 00:01:02,020 is the element selector. 22 00:01:02,020 --> 00:01:03,340 And with the element selector, 23 00:01:03,340 --> 00:01:06,760 we can simply select all elements of a certain type. 24 00:01:06,760 --> 00:01:08,573 For example, the body. 25 00:01:10,110 --> 00:01:11,350 So we write body, 26 00:01:11,350 --> 00:01:13,330 and then curly braces, 27 00:01:13,330 --> 00:01:17,390 and then in here we can write or CSS declarations. 28 00:01:17,390 --> 00:01:20,800 So each CSS declaration has a property name, 29 00:01:20,800 --> 00:01:22,170 and then a value. 30 00:01:22,170 --> 00:01:25,270 For example, we can style the background color. 31 00:01:25,270 --> 00:01:27,370 So background color, 32 00:01:27,370 --> 00:01:29,940 and let me actually autocomplete it here. 33 00:01:29,940 --> 00:01:32,200 So background color is the property, 34 00:01:32,200 --> 00:01:34,343 and then let's say, green. 35 00:01:35,180 --> 00:01:38,450 So in CSS there are a couple of predefined color names, 36 00:01:38,450 --> 00:01:39,700 and we can then use this. 37 00:01:41,923 --> 00:01:44,320 Give it a safe, and bam. 38 00:01:44,320 --> 00:01:46,780 Our page is green now. 39 00:01:46,780 --> 00:01:48,353 So that's CSS for you. 40 00:01:49,500 --> 00:01:52,053 So, we have the body element selector, 41 00:01:52,940 --> 00:01:55,670 then all of this here is our declaration block, 42 00:01:55,670 --> 00:01:58,030 and this here is a simple declaration, 43 00:01:58,030 --> 00:02:01,670 where background color is the property in green, 44 00:02:01,670 --> 00:02:04,010 is the specified value. 45 00:02:04,010 --> 00:02:08,380 Now usually we write or CSS in an external CSS file. 46 00:02:08,380 --> 00:02:10,440 So just like we write JavaScript, 47 00:02:10,440 --> 00:02:12,150 in an external script, 48 00:02:12,150 --> 00:02:15,620 we do the same basically with CSS. 49 00:02:15,620 --> 00:02:18,423 So let's create that separate CSS file. 50 00:02:19,430 --> 00:02:22,690 So I'm bringing back the sidebar here, 51 00:02:22,690 --> 00:02:25,490 using Command or Control B, 52 00:02:25,490 --> 00:02:29,857 and then, let's call this one the style dot CSS. 53 00:02:32,070 --> 00:02:33,323 Close the sidebar, 54 00:02:34,190 --> 00:02:36,690 and now we need to connect these two. 55 00:02:36,690 --> 00:02:39,230 So again, just like we had to connect 56 00:02:39,230 --> 00:02:41,280 the JavaScript file to the HTML, 57 00:02:41,280 --> 00:02:43,430 we also have to select the CSS. 58 00:02:43,430 --> 00:02:45,603 But it works a bit differently. 59 00:02:47,700 --> 00:02:48,693 So let's get, 60 00:02:49,810 --> 00:02:52,310 we'll actually let's copy this here, 61 00:02:52,310 --> 00:02:54,713 or cut it here. 62 00:02:55,690 --> 00:02:58,830 So when I save it now, of course it's gone, 63 00:02:58,830 --> 00:02:59,740 Okay. 64 00:02:59,740 --> 00:03:02,420 And that's because the style file, 65 00:03:02,420 --> 00:03:05,053 is not yet linked to the HTML. 66 00:03:05,890 --> 00:03:10,090 So, we link it by using the link element. 67 00:03:10,090 --> 00:03:11,783 So that's not very creative, 68 00:03:12,920 --> 00:03:15,390 so here we use href again, 69 00:03:15,390 --> 00:03:18,140 which remember is the same attribute, 70 00:03:18,140 --> 00:03:19,763 as in the anchor element here. 71 00:03:20,760 --> 00:03:24,780 Okay, but don't confuse anchor with link. 72 00:03:24,780 --> 00:03:27,220 So link does not create a clickable link, 73 00:03:27,220 --> 00:03:28,720 so like this, 74 00:03:28,720 --> 00:03:31,690 instead we use it only to basically 75 00:03:31,690 --> 00:03:34,203 link CSS files to HTML files. 76 00:03:35,110 --> 00:03:37,840 So here, we say style dot CSS, 77 00:03:37,840 --> 00:03:40,930 because that's the name that we gave to the file. 78 00:03:40,930 --> 00:03:41,763 Okay. 79 00:03:41,763 --> 00:03:43,610 And then we also need to specify 80 00:03:43,610 --> 00:03:46,793 the rel attribute and set it to Stylesheet. 81 00:03:48,800 --> 00:03:51,610 Give it a safe and here we go. 82 00:03:51,610 --> 00:03:53,950 The green color is back. 83 00:03:53,950 --> 00:03:54,783 Okay. 84 00:03:54,783 --> 00:03:57,100 And so now we can write all our styles, 85 00:03:57,100 --> 00:03:59,600 in the separate file here, 86 00:03:59,600 --> 00:04:03,253 and so we separated the presentation from the content. 87 00:04:06,150 --> 00:04:08,513 So let's actually make this like yellow, 88 00:04:10,110 --> 00:04:14,890 and we should probably give it a little bit a nicer color, 89 00:04:14,890 --> 00:04:17,760 and then VS code when you hover a color like this, 90 00:04:17,760 --> 00:04:21,180 you see this pop up which then allows you to select a color. 91 00:04:21,180 --> 00:04:22,330 And this is very handy. 92 00:04:23,430 --> 00:04:25,603 So let's do this, 93 00:04:25,603 --> 00:04:29,493 and then maybe just very subtle color like this. 94 00:04:30,380 --> 00:04:32,773 All right, this looks a lot better already. 95 00:04:33,670 --> 00:04:38,670 Okay, so let's now explore some more CSS properties. 96 00:04:39,140 --> 00:04:42,083 For example, we can set the font family. 97 00:04:42,940 --> 00:04:44,510 And here we can start by setting it 98 00:04:44,510 --> 00:04:47,910 to a font that you probably have on your computer, 99 00:04:47,910 --> 00:04:50,620 and so Arial is probably one that you have, 100 00:04:50,620 --> 00:04:52,900 now in practice we use web fonts, 101 00:04:52,900 --> 00:04:56,360 for example from a service like Google fonts, 102 00:04:56,360 --> 00:04:57,193 okay? 103 00:04:57,193 --> 00:04:59,200 But in this case it doesn't really matter. 104 00:04:59,200 --> 00:05:01,180 So let's just give it a save, 105 00:05:01,180 --> 00:05:04,750 and so, saw this font here changing. 106 00:05:04,750 --> 00:05:07,100 And on your system, that should work too, 107 00:05:07,100 --> 00:05:08,751 and if you don't have Arial, 108 00:05:08,751 --> 00:05:13,240 then just use some other fonts that you have available. 109 00:05:13,240 --> 00:05:14,890 But now you might ask, 110 00:05:14,890 --> 00:05:18,740 we set the font family on the body, right? 111 00:05:18,740 --> 00:05:22,310 So why did all these elements like this h1 here 112 00:05:22,310 --> 00:05:24,200 and this P element, 113 00:05:24,200 --> 00:05:26,080 and this h2 element, 114 00:05:26,080 --> 00:05:29,840 why did all of them get the Aria font as well? 115 00:05:29,840 --> 00:05:32,910 Well, that's because the font family property 116 00:05:32,910 --> 00:05:35,331 is a property that gets inherited. 117 00:05:35,331 --> 00:05:38,603 Okay. So all the Child Elements of the body element, 118 00:05:38,603 --> 00:05:43,230 will automatically get this font family assigned to them. 119 00:05:43,230 --> 00:05:44,840 And that makes it very handy, 120 00:05:44,840 --> 00:05:46,730 So that we don't have to go ahead, 121 00:05:46,730 --> 00:05:50,380 and set the font families separately on all these elements. 122 00:05:50,380 --> 00:05:52,330 So just setting this on the body, 123 00:05:52,330 --> 00:05:55,290 will then set it on all the Child Elements. 124 00:05:55,290 --> 00:05:58,460 Now, most properties to actually not inherit. 125 00:05:58,460 --> 00:06:00,030 But generally, all the properties 126 00:06:00,030 --> 00:06:03,130 that are related to funds will inherit. 127 00:06:03,130 --> 00:06:08,130 So let's check out another one, font size, 128 00:06:08,830 --> 00:06:10,603 and let's set it to 20 pixels. 129 00:06:13,180 --> 00:06:14,240 Give it a save, 130 00:06:14,240 --> 00:06:17,210 and you'll see that everything got a little bit bigger now. 131 00:06:17,210 --> 00:06:19,440 However, not all the elements 132 00:06:19,440 --> 00:06:21,970 have a font size of 20 pixels now. 133 00:06:21,970 --> 00:06:24,940 And that's because the elements like this h1, 134 00:06:24,940 --> 00:06:28,300 and this h2 have predefined font sizes 135 00:06:28,300 --> 00:06:31,210 that automatically are applied from the browser, 136 00:06:31,210 --> 00:06:33,900 if we do not specify them on our own. 137 00:06:33,900 --> 00:06:34,733 Okay. 138 00:06:34,733 --> 00:06:36,110 But of course we can overwrite them 139 00:06:36,110 --> 00:06:38,180 with our own selectors. 140 00:06:38,180 --> 00:06:40,260 So let's say h1, 141 00:06:40,260 --> 00:06:42,760 and so this is another element selector, 142 00:06:42,760 --> 00:06:46,053 and in this case of course it selects the h1 element. 143 00:06:47,790 --> 00:06:50,800 So let's say font size 50 pixels. 144 00:06:50,800 --> 00:06:53,123 And so take a look at this now, 145 00:06:54,110 --> 00:06:56,214 and well that's huge. 146 00:06:56,214 --> 00:06:59,253 Let's make it a little bit smaller maybe 40, 147 00:07:00,130 --> 00:07:02,200 now that looks about right. 148 00:07:02,200 --> 00:07:03,033 All right. 149 00:07:03,033 --> 00:07:04,547 And now let's actually use the class names 150 00:07:04,547 --> 00:07:07,650 and DIDs that we set in the previous lecture 151 00:07:07,650 --> 00:07:11,750 to now select elements based on these classes. 152 00:07:11,750 --> 00:07:15,410 So, remember that here we set this paragraph 153 00:07:15,410 --> 00:07:19,100 to first and this one to second. 154 00:07:19,100 --> 00:07:21,830 So we basically named them like this. 155 00:07:21,830 --> 00:07:23,790 And in fact, let's go ahead, 156 00:07:23,790 --> 00:07:27,303 and add another class here to this other paragraph. 157 00:07:28,370 --> 00:07:33,370 So class, and I will call this one first two. 158 00:07:34,000 --> 00:07:34,833 Okay. 159 00:07:34,833 --> 00:07:37,660 So remember, IDs have to be unique, 160 00:07:37,660 --> 00:07:39,320 so we can only use them once. 161 00:07:39,320 --> 00:07:41,820 But classes can be used multiple times. 162 00:07:41,820 --> 00:07:43,850 And so that's what we did here. 163 00:07:43,850 --> 00:07:45,280 And so now I can go ahead 164 00:07:45,280 --> 00:07:46,920 and select all the elements, 165 00:07:46,920 --> 00:07:48,700 which have the first class, 166 00:07:48,700 --> 00:07:51,360 so this paragraph and this paragraph, 167 00:07:51,360 --> 00:07:53,410 and then style them however I want. 168 00:07:53,410 --> 00:07:56,200 And this will then only affect these two paragraphs, 169 00:07:56,200 --> 00:07:57,563 but not this one. 170 00:07:58,810 --> 00:08:01,820 Okay, because this one has the second class. 171 00:08:01,820 --> 00:08:03,170 So let me show that to you. 172 00:08:04,210 --> 00:08:07,770 And so the class selector is using the dot. 173 00:08:07,770 --> 00:08:10,083 So dot first. 174 00:08:11,380 --> 00:08:14,180 Okay, and so this is our selector. 175 00:08:14,180 --> 00:08:15,900 Dot is for the class. 176 00:08:15,900 --> 00:08:18,540 And then first is the class name. 177 00:08:18,540 --> 00:08:20,850 And so we set the text color, 178 00:08:20,850 --> 00:08:22,940 using the color property. 179 00:08:22,940 --> 00:08:24,900 And let's set it to red. 180 00:08:24,900 --> 00:08:26,160 Give it a safe, 181 00:08:26,160 --> 00:08:28,770 and what do you think will happen now? 182 00:08:28,770 --> 00:08:30,260 That's right. 183 00:08:30,260 --> 00:08:32,210 This paragraph and this one, 184 00:08:32,210 --> 00:08:33,520 which are the two paragraphs, 185 00:08:33,520 --> 00:08:37,190 which have the first class are now red. 186 00:08:37,190 --> 00:08:40,360 But this other paragraph, is of course not read, 187 00:08:40,360 --> 00:08:42,510 because we didn't select it here. 188 00:08:42,510 --> 00:08:43,343 Okay. 189 00:08:43,343 --> 00:08:46,283 And so this CSS rule here does not apply to it. 190 00:08:48,950 --> 00:08:51,603 Finally, that's also format or form. 191 00:08:52,800 --> 00:08:56,800 So, let's check that out, 192 00:08:56,800 --> 00:09:01,170 and so here we have this your name ID, right? 193 00:09:01,170 --> 00:09:04,990 So we already know how to select based on the class name, 194 00:09:04,990 --> 00:09:08,533 and so let's now learn how to select based on ID. 195 00:09:10,130 --> 00:09:12,450 And it's very similar but instead of the dot, 196 00:09:12,450 --> 00:09:14,040 we use the hash. 197 00:09:14,040 --> 00:09:17,040 So hash, your name, 198 00:09:17,040 --> 00:09:20,360 I think that was the ID, right? 199 00:09:20,360 --> 00:09:21,803 Yes, your name. 200 00:09:25,410 --> 00:09:27,893 So let's set a different background color here, 201 00:09:31,690 --> 00:09:33,130 and I will again use this trick 202 00:09:33,130 --> 00:09:34,720 where I can now set the color 203 00:09:35,560 --> 00:09:38,280 using this pop up window, 204 00:09:38,280 --> 00:09:39,980 so that's the trick I like to use. 205 00:09:41,570 --> 00:09:44,570 Let's make it similar but a little bit darker. 206 00:09:44,570 --> 00:09:47,180 Yes, that looks nice. 207 00:09:47,180 --> 00:09:49,890 And we will make it even nicer in the next lecture, 208 00:09:49,890 --> 00:09:52,020 after we learned about the box model, 209 00:09:52,020 --> 00:09:53,823 but for now this looks good already. 210 00:09:55,450 --> 00:09:57,000 So another one that we can use here 211 00:09:57,000 --> 00:09:59,230 is the border property, 212 00:09:59,230 --> 00:10:00,830 and the border property, 213 00:10:00,830 --> 00:10:03,940 is so called shorthand property. 214 00:10:03,940 --> 00:10:06,360 Because here we can set multiple values 215 00:10:06,360 --> 00:10:08,230 for just one property. 216 00:10:08,230 --> 00:10:10,950 So for the border we can set the width, 217 00:10:10,950 --> 00:10:13,380 so basically the thickness of the border, 218 00:10:13,380 --> 00:10:15,200 so let's say five pixels, 219 00:10:15,200 --> 00:10:17,803 then we can set the style of the border, 220 00:10:18,860 --> 00:10:20,480 and let's make it solid, 221 00:10:20,480 --> 00:10:23,572 but we could also make it dotted or dashed, 222 00:10:23,572 --> 00:10:26,750 but that would look a little bit like weird, 223 00:10:26,750 --> 00:10:28,490 and then the color. 224 00:10:28,490 --> 00:10:33,030 So until now, we have always used CSS color names, 225 00:10:33,030 --> 00:10:36,090 or this RGB format like this, 226 00:10:36,090 --> 00:10:40,023 But of course CSS also accepts RGB colors. 227 00:10:40,920 --> 00:10:42,460 So for that we use the hash, 228 00:10:42,460 --> 00:10:46,083 and then let's use 444 as this dark gray. 229 00:10:47,230 --> 00:10:49,163 So you see it as dark gray, 230 00:10:50,550 --> 00:10:52,340 but we could of course change it, 231 00:10:52,340 --> 00:10:55,123 again using this pop up. 232 00:10:56,500 --> 00:10:57,333 Okay. 233 00:10:57,333 --> 00:10:59,420 But let's leave it here with the RGB code, 234 00:10:59,420 --> 00:11:01,920 give it a save and here you see, 235 00:11:01,920 --> 00:11:04,540 this nice border around the form. 236 00:11:04,540 --> 00:11:05,570 Okay. 237 00:11:05,570 --> 00:11:09,350 So again, this border is a shorthand property, 238 00:11:09,350 --> 00:11:10,900 because it allows us to specify 239 00:11:10,900 --> 00:11:13,560 multiple values here like this. 240 00:11:13,560 --> 00:11:15,490 You can also notice that this property 241 00:11:15,490 --> 00:11:18,170 is not inherited, right? 242 00:11:18,170 --> 00:11:22,487 So unlike the font family or the font size. 243 00:11:22,487 --> 00:11:24,450 'Cause if it was inherited, 244 00:11:24,450 --> 00:11:26,670 then now all these Child Elements here 245 00:11:26,670 --> 00:11:30,020 would have a five pixel border around them as well. 246 00:11:30,020 --> 00:11:30,980 Right? 247 00:11:30,980 --> 00:11:32,380 So this one and this one, 248 00:11:32,380 --> 00:11:33,790 but they do not. 249 00:11:33,790 --> 00:11:36,550 And while in this case it wouldn't make sense. 250 00:11:36,550 --> 00:11:39,510 And so that's why border is not inherited. 251 00:11:39,510 --> 00:11:42,840 Okay, and this would be enough for one lecture. 252 00:11:42,840 --> 00:11:45,270 In the next one, we will learn about the box model, 253 00:11:45,270 --> 00:11:47,620 so that we can then add some spacing here. 254 00:11:47,620 --> 00:11:50,830 For example some spacing here inside of this box, 255 00:11:50,830 --> 00:11:52,590 to give it some space here, 256 00:11:52,590 --> 00:11:55,270 and also some space between these elements. 257 00:11:55,270 --> 00:11:57,080 So stay tuned for that, 258 00:11:57,080 --> 00:11:58,803 and see you in the next lecture.