1 00:00:02,080 --> 00:00:04,140 So let's add some styling 2 00:00:04,140 --> 00:00:07,360 and of course the style's CSS file is the file 3 00:00:07,360 --> 00:00:09,050 we need to go for that. 4 00:00:09,050 --> 00:00:12,630 Here, we can set up all kinds of CSS styling, 5 00:00:12,630 --> 00:00:14,693 and we will add more and more styles 6 00:00:14,693 --> 00:00:16,910 throughout this section. 7 00:00:16,910 --> 00:00:19,473 But the first kind of style I want to start with 8 00:00:19,473 --> 00:00:22,940 is the page background color, 9 00:00:22,940 --> 00:00:25,920 which is a very light purple color, 10 00:00:25,920 --> 00:00:30,010 a white color with a slight purple-ish touch. 11 00:00:30,010 --> 00:00:32,729 And I want to change the overall font family 12 00:00:32,729 --> 00:00:36,572 for all those HTML elements on the screen. 13 00:00:36,572 --> 00:00:38,500 Now, as you learned, 14 00:00:38,500 --> 00:00:43,500 you could also change styles without an extra CSS file. 15 00:00:43,740 --> 00:00:46,920 You could target an html element 16 00:00:46,920 --> 00:00:49,000 and add the style attribute, 17 00:00:49,000 --> 00:00:51,860 and then add the styles for this element here 18 00:00:51,860 --> 00:00:54,000 through that styles attribute. 19 00:00:54,000 --> 00:00:55,850 That would work. 20 00:00:55,850 --> 00:00:57,870 But, the downside of this approach 21 00:00:57,870 --> 00:01:01,830 is that, A, you write all your CSS code 22 00:01:01,830 --> 00:01:04,811 directly inside your HTML code, 23 00:01:04,811 --> 00:01:09,190 which, for bigger pages with lots of HTML code, 24 00:01:09,190 --> 00:01:14,190 can get hard to read and manage for you as a developer, 25 00:01:14,370 --> 00:01:18,290 and, B, you have a lot of code duplication, 26 00:01:18,290 --> 00:01:21,980 which also means that if you want to change some style, 27 00:01:21,980 --> 00:01:25,430 you often have to go into the different attributes 28 00:01:25,430 --> 00:01:28,580 of a lot of HTML elements to adjust it 29 00:01:28,580 --> 00:01:31,080 for all those elements. 30 00:01:31,080 --> 00:01:33,374 And, for those reasons, you typically work 31 00:01:33,374 --> 00:01:35,648 with global styles. 32 00:01:35,648 --> 00:01:39,130 You can add global styles with the style element 33 00:01:39,130 --> 00:01:41,400 in the head section as well. 34 00:01:41,400 --> 00:01:45,930 But, since that then still leads to large HTML files, 35 00:01:45,930 --> 00:01:48,210 with lots of CSS code in them, 36 00:01:48,210 --> 00:01:52,010 it's more common to use external CSS files, 37 00:01:52,010 --> 00:01:54,350 as we are doing it here. 38 00:01:54,350 --> 00:01:55,960 And therefore here is the place 39 00:01:55,960 --> 00:01:58,690 where I want to write my CSS code. 40 00:01:58,690 --> 00:02:00,490 Now, as I just said, I want to set 41 00:02:00,490 --> 00:02:04,950 an overall background color and an overall font family. 42 00:02:04,950 --> 00:02:09,949 And therefore I want to target a high-level HTML element 43 00:02:11,050 --> 00:02:14,500 so that I do affect the overall page. 44 00:02:14,500 --> 00:02:17,600 And the body element sounds just about right, 45 00:02:17,600 --> 00:02:21,273 since I want to affect the entire visual content. 46 00:02:22,160 --> 00:02:25,480 And for this, we can target the body element 47 00:02:25,480 --> 00:02:29,340 with that body type selector, 48 00:02:29,340 --> 00:02:32,960 because you'll learn that global CSS styling 49 00:02:32,960 --> 00:02:37,560 is applied by a writing those CSS rules, 50 00:02:37,560 --> 00:02:39,356 where you have a selector 51 00:02:39,356 --> 00:02:41,790 and you'll learn about the type selector. 52 00:02:41,790 --> 00:02:44,750 You'll also learn about the ID or class selector, 53 00:02:44,750 --> 00:02:47,600 and that you can combine selectors. 54 00:02:47,600 --> 00:02:50,530 We'll use all of that throughout this section. 55 00:02:50,530 --> 00:02:53,080 Here, I'm using the type selector. 56 00:02:53,080 --> 00:02:56,870 And then once you've got a selector, you add curly braces. 57 00:02:56,870 --> 00:02:59,240 And between those curly braces, 58 00:02:59,240 --> 00:03:02,830 you write the actual CSS code. 59 00:03:02,830 --> 00:03:06,580 You target different CSS properties to, then, 60 00:03:06,580 --> 00:03:10,920 assign different CSS styles, to those properties, 61 00:03:10,920 --> 00:03:13,410 different values, which you set 62 00:03:13,410 --> 00:03:16,370 for those different CSS properties. 63 00:03:16,370 --> 00:03:18,450 That's what we do here. 64 00:03:18,450 --> 00:03:19,780 And here, if you want to change 65 00:03:19,780 --> 00:03:22,850 the overall document background color, 66 00:03:22,850 --> 00:03:27,350 we can simply target that background color, CSS property, 67 00:03:27,350 --> 00:03:30,540 and then set it to any color of our choice. 68 00:03:30,540 --> 00:03:35,370 And here I picked a nice little RGB color, red green blue, 69 00:03:35,370 --> 00:03:38,550 which is 244, 234, 255. 70 00:03:41,690 --> 00:03:44,660 This gives us a light background color 71 00:03:44,660 --> 00:03:47,707 with a slightly purple touch. 72 00:03:47,707 --> 00:03:52,707 And you did learn that RGB colors are just one kind of color 73 00:03:52,890 --> 00:03:55,200 or one way of setting colors. 74 00:03:55,200 --> 00:03:57,500 And you can go through those different ways 75 00:03:57,500 --> 00:04:00,960 of setting colors by hovering over a color 76 00:04:00,960 --> 00:04:02,780 here in visual studio code, 77 00:04:02,780 --> 00:04:06,580 and then clicking on that color definition here. 78 00:04:06,580 --> 00:04:10,330 And then it also switches to this hexadecimal definition, 79 00:04:10,330 --> 00:04:14,168 which is an alternative or to the HSL definition, 80 00:04:14,168 --> 00:04:16,800 Hue Saturation Lightness. 81 00:04:16,800 --> 00:04:20,290 And these are simply different ways of defining a color, 82 00:04:20,290 --> 00:04:21,510 of setting a color, 83 00:04:21,510 --> 00:04:25,300 and you can set all colors with all those different ways. 84 00:04:25,300 --> 00:04:29,513 And here I'm just using the RGB way of defining a color. 85 00:04:30,620 --> 00:04:32,440 And if we save this, 86 00:04:32,440 --> 00:04:36,070 we now have a slightly purple-ish background. 87 00:04:36,070 --> 00:04:37,225 It's very light. 88 00:04:37,225 --> 00:04:40,210 You should be able to see it if you're following along in 89 00:04:40,210 --> 00:04:41,200 your browser. 90 00:04:41,200 --> 00:04:42,033 And, with that, 91 00:04:42,033 --> 00:04:43,983 we get the right background color. 92 00:04:44,870 --> 00:04:47,320 Now I also want to change the font family, 93 00:04:47,320 --> 00:04:48,926 so the font which we use. 94 00:04:48,926 --> 00:04:50,000 And again, 95 00:04:50,000 --> 00:04:53,930 I could do this for the individual HTML elements, 96 00:04:53,930 --> 00:04:55,993 also by targeting them here, 97 00:04:55,993 --> 00:05:00,993 but we can also utilize a HTML concept or a CSS concept 98 00:05:02,000 --> 00:05:04,156 called inheritance. 99 00:05:04,156 --> 00:05:08,976 I can set a font family here on the body selector 100 00:05:08,976 --> 00:05:12,857 and set this to Roboto, in single quotes, 101 00:05:12,857 --> 00:05:17,857 comma sans-serif, to set the font family to Roboto, 102 00:05:17,970 --> 00:05:20,276 or, if that's not available, for some reason, 103 00:05:20,276 --> 00:05:23,288 to sans-serif as a fallback. 104 00:05:23,288 --> 00:05:25,760 And if I save this, we see that, indeed, 105 00:05:25,760 --> 00:05:28,230 the font did change here. 106 00:05:28,230 --> 00:05:29,911 Now, why did it change, though? 107 00:05:29,911 --> 00:05:34,225 After all, I did not target the H1 element. 108 00:05:34,225 --> 00:05:36,830 Well, that's this inheritance concept, 109 00:05:36,830 --> 00:05:40,840 which we can also see if I inspect this H1 element. 110 00:05:40,840 --> 00:05:45,020 Here, we see that various styles affect this element. 111 00:05:45,020 --> 00:05:48,570 And we see that we got some browser default styles here. 112 00:05:48,570 --> 00:05:49,660 But if we scroll down, 113 00:05:49,660 --> 00:05:53,920 we also see that it got some inherited styles from body. 114 00:05:53,920 --> 00:05:56,210 And here it's this font family style, 115 00:05:56,210 --> 00:06:00,270 which is all is applied to this H1 one element. 116 00:06:00,270 --> 00:06:04,610 Now you did learn that not all CSS properties 117 00:06:04,610 --> 00:06:06,470 are inheritable. 118 00:06:06,470 --> 00:06:09,230 Basically you can use common sense to guess 119 00:06:09,230 --> 00:06:12,270 whether a property is inheritable or not. 120 00:06:12,270 --> 00:06:15,700 The background color, for example, is not inherited. 121 00:06:15,700 --> 00:06:18,560 Here, we just have his background color applied 122 00:06:18,560 --> 00:06:21,560 to the body as a whole, but it's not inherited, 123 00:06:21,560 --> 00:06:24,400 but the font family typically is. 124 00:06:24,400 --> 00:06:28,690 So, here, this H1 element is inheriting the font family, 125 00:06:28,690 --> 00:06:31,783 and that's why it is using this Roboto font now. 126 00:06:33,140 --> 00:06:35,390 And that's a good first step, 127 00:06:35,390 --> 00:06:38,478 but it's not all I want to do for the header here. 128 00:06:38,478 --> 00:06:41,860 Instead, I also want to change the text color 129 00:06:41,860 --> 00:06:43,587 of this H1 element, 130 00:06:43,587 --> 00:06:47,053 and I want to increase its font size a little bit. 131 00:06:48,020 --> 00:06:51,030 And to do this, I'll go back to my CSS code 132 00:06:51,030 --> 00:06:54,233 and also select the H1 element directly, like this. 133 00:06:55,248 --> 00:06:57,340 Now, if we target it like this, 134 00:06:57,340 --> 00:06:59,450 then we can set CSS properties, 135 00:06:59,450 --> 00:07:02,410 which will only affect all H1 elements, 136 00:07:02,410 --> 00:07:04,580 but no other elements on the page, 137 00:07:04,580 --> 00:07:08,360 no matter if the properties are inheritable or not. 138 00:07:08,360 --> 00:07:10,060 And therefore here I can then, for example, 139 00:07:10,060 --> 00:07:13,140 set the font size to 52 pixels. 140 00:07:13,140 --> 00:07:15,400 It's up to you which value you want to use here, 141 00:07:15,400 --> 00:07:17,710 but I'll go with 52 pixels, 142 00:07:17,710 --> 00:07:20,550 since I think that's a nice size here. 143 00:07:20,550 --> 00:07:23,043 And I'll set the color to a purple color 144 00:07:23,043 --> 00:07:28,043 with RGB and then 88, 49, 196. 145 00:07:30,583 --> 00:07:32,550 Now, pixels, by the way, 146 00:07:32,550 --> 00:07:35,170 is one of the available units 147 00:07:35,170 --> 00:07:38,510 for setting sizes and dimensions. 148 00:07:38,510 --> 00:07:39,913 We'll learn about other units 149 00:07:39,913 --> 00:07:42,030 throughout this course as well, 150 00:07:42,030 --> 00:07:46,260 but this will set a size in device, independent pixels, 151 00:07:46,260 --> 00:07:48,725 which means that it will automatically be scaled 152 00:07:48,725 --> 00:07:53,725 to look similar, both on high- and low-resolution devices 153 00:07:54,710 --> 00:07:58,560 so that you don't need to worry about the resolution 154 00:07:58,560 --> 00:08:01,398 of your end users' devices. 155 00:08:01,398 --> 00:08:04,677 And, the other, if we now set these two extra properties, 156 00:08:04,677 --> 00:08:07,953 we now have a bigger title, which is purple. 157 00:08:09,100 --> 00:08:12,150 Now, it would also be nice if both the title 158 00:08:12,150 --> 00:08:16,310 and the image would be aligned to the center 159 00:08:16,310 --> 00:08:19,000 and we can achieve this by targeting 160 00:08:19,000 --> 00:08:23,160 the header element itself. 161 00:08:23,160 --> 00:08:27,320 So this wrapper around H1 image, 162 00:08:27,320 --> 00:08:31,130 and on this header, we can then set the text, 163 00:08:31,130 --> 00:08:35,933 align CSS property, as you learned to center its content. 164 00:08:37,370 --> 00:08:38,751 And that is important 165 00:08:38,751 --> 00:08:41,929 and a common source of confusion. 166 00:08:41,929 --> 00:08:46,930 Text align does center or align the content of the element 167 00:08:48,240 --> 00:08:49,800 on which you set it. 168 00:08:49,800 --> 00:08:53,800 So it aligns to content of header and, to be very precise, 169 00:08:53,800 --> 00:08:57,780 it aligns the text content or content 170 00:08:57,780 --> 00:09:01,760 that is treated like text, or put in other words, 171 00:09:01,760 --> 00:09:05,550 it aligns the in-line content. 172 00:09:05,550 --> 00:09:07,101 And you did learn about the difference 173 00:09:07,101 --> 00:09:11,440 between block and in-line elements as well. 174 00:09:11,440 --> 00:09:15,125 Block elements are elements which always, by default, 175 00:09:15,125 --> 00:09:18,013 occupy the full available width, 176 00:09:18,013 --> 00:09:21,190 and the complete line in the browser 177 00:09:21,190 --> 00:09:23,210 when they are displayed. 178 00:09:23,210 --> 00:09:27,170 Examples for block elements would be header and main, 179 00:09:27,170 --> 00:09:29,170 but also H1. 180 00:09:29,170 --> 00:09:32,790 And that's why the image is in a new line here 181 00:09:32,790 --> 00:09:37,081 because the H1 element occupies the entire width 182 00:09:37,081 --> 00:09:40,660 of that screen, even though the text 183 00:09:40,660 --> 00:09:44,420 actually does not take as much space. 184 00:09:44,420 --> 00:09:48,680 It doesn't allow any other elements next to it. 185 00:09:48,680 --> 00:09:53,680 Even if we would shrink the width with that width property, 186 00:09:54,000 --> 00:09:57,810 even if I would set a width here of 100 pixels only, 187 00:09:57,810 --> 00:09:59,980 then it would wrap the text, 188 00:09:59,980 --> 00:10:04,200 but it would still not put the image in the same line, 189 00:10:04,200 --> 00:10:06,516 because block elements, by default, 190 00:10:06,516 --> 00:10:10,074 always occupy the entire line 191 00:10:10,074 --> 00:10:13,773 and they don't allow any elements next to them. 192 00:10:13,773 --> 00:10:16,110 That's just how they work. 193 00:10:16,110 --> 00:10:18,370 On the other hand, in-line content 194 00:10:18,370 --> 00:10:23,370 like plain text or images, do sit side by side. 195 00:10:23,760 --> 00:10:27,010 Here, it just doesn't work because that text, 196 00:10:27,010 --> 00:10:28,870 which would be a in-line element 197 00:10:28,870 --> 00:10:31,990 is inside of the H1 element, which is not. 198 00:10:31,990 --> 00:10:34,560 But the image element here is a in-line element. 199 00:10:34,560 --> 00:10:38,050 The text inside of H1 is a in-line element. 200 00:10:38,050 --> 00:10:41,550 And hence, if I set text aligned center here on header, 201 00:10:41,550 --> 00:10:44,880 all that in-line content is centered. 202 00:10:44,880 --> 00:10:49,090 If we inspect the image here, this image element, 203 00:10:49,090 --> 00:10:54,090 we see that it's centered because the text align center 204 00:10:55,380 --> 00:10:57,330 style is affecting it. 205 00:10:57,330 --> 00:10:59,620 And the same is true for the H1 element. 206 00:10:59,620 --> 00:11:03,230 Here, we also have text align center from the header, 207 00:11:03,230 --> 00:11:04,462 which in the end is responsible 208 00:11:04,462 --> 00:11:08,200 for centering the content in H1. 209 00:11:08,200 --> 00:11:12,930 So that's another key concept, in-line and block elements. 210 00:11:12,930 --> 00:11:13,960 You'll learn about that 211 00:11:13,960 --> 00:11:16,600 over the last course sections as well. 212 00:11:16,600 --> 00:11:19,100 And if you wonder which elements are in-line 213 00:11:19,100 --> 00:11:21,770 and which elements are block elements, 214 00:11:21,770 --> 00:11:24,395 again, common sense will get you pretty far. 215 00:11:24,395 --> 00:11:27,850 Whichever kind of content that typically should sit 216 00:11:27,850 --> 00:11:31,310 next to each other like text and maybe text and images, 217 00:11:31,310 --> 00:11:33,139 or links inside of text, 218 00:11:33,139 --> 00:11:37,270 any contents that typically should not force a line break 219 00:11:37,270 --> 00:11:40,840 indeed is in-line content in HTML 220 00:11:40,840 --> 00:11:41,740 and, on the other hand, 221 00:11:41,740 --> 00:11:44,690 content where you would expect a line break thereafter, 222 00:11:44,690 --> 00:11:48,265 like after a paragraph of text or after a title, 223 00:11:48,265 --> 00:11:52,063 such type of content typically is block content. 224 00:11:53,270 --> 00:11:56,250 And that's it for the basic header styles. 225 00:11:56,250 --> 00:11:58,846 But now I want to add some spacing 226 00:11:58,846 --> 00:12:02,060 around my header here, for later. 227 00:12:02,060 --> 00:12:06,153 And I also want to change the image size a little bit.