1 00:00:02,251 --> 00:00:04,770 Now, that you learned about the basics of CSS, 2 00:00:04,770 --> 00:00:08,010 I want to apply what we learned to this paragraph, 3 00:00:08,010 --> 00:00:11,051 and I want to style this paragraph as well. 4 00:00:11,051 --> 00:00:14,660 Therefore, we can also add the style attribute here, 5 00:00:14,660 --> 00:00:16,270 because as I mentioned before, 6 00:00:16,270 --> 00:00:19,040 the style attribute is an attribute, 7 00:00:19,040 --> 00:00:23,000 which you can add to basically every HTML element, 8 00:00:23,000 --> 00:00:27,510 because basically every HTML element can be styled. 9 00:00:27,510 --> 00:00:30,690 I'm saying basically because we will later learn 10 00:00:30,690 --> 00:00:34,210 about a few elements that actually can't be styled 11 00:00:34,210 --> 00:00:36,330 because they're not visible, 12 00:00:36,330 --> 00:00:38,380 but I'll come back to that later. 13 00:00:38,380 --> 00:00:39,560 So to this paragraph, 14 00:00:39,560 --> 00:00:42,410 we can add this style attribute. 15 00:00:42,410 --> 00:00:46,100 And now here, I also want to set a font family 16 00:00:46,100 --> 00:00:48,240 of Sans Serif, 17 00:00:48,240 --> 00:00:52,320 and I also want to set text alignment to center here. 18 00:00:52,320 --> 00:00:55,160 So I'll repeat the styles from before. 19 00:00:55,160 --> 00:00:58,890 And I also want to give this paragraph a color, 20 00:00:58,890 --> 00:01:01,780 and here I'll now choose red as a color. 21 00:01:01,780 --> 00:01:05,790 I'll actually not keep red as a color on the H-1 tag, 22 00:01:05,790 --> 00:01:07,910 either in the near future, 23 00:01:07,910 --> 00:01:10,200 but I want to use a different color here. 24 00:01:10,200 --> 00:01:13,860 And now that's the topic of this lecture, colors. 25 00:01:13,860 --> 00:01:17,250 For the H-1 element, we chose red as a color. 26 00:01:17,250 --> 00:01:20,280 Now here, I want to use a dark grayish color 27 00:01:20,280 --> 00:01:24,173 and conveniently, there is a dark gray color we can assign. 28 00:01:25,270 --> 00:01:27,360 Now, if we do that and save this, 29 00:01:27,360 --> 00:01:29,080 if we have a look at our page, 30 00:01:29,080 --> 00:01:32,500 we can see that this paragraph now is centered, 31 00:01:32,500 --> 00:01:34,710 has a font family of Sans Serif, 32 00:01:34,710 --> 00:01:37,420 there are no serifs on the characters anymore, 33 00:01:37,420 --> 00:01:40,090 and we can see that it's grayish, 34 00:01:40,090 --> 00:01:43,370 but what if that's not exactly the color we want? 35 00:01:43,370 --> 00:01:46,313 What if I want a little bit of a darker gray? 36 00:01:47,280 --> 00:01:49,940 The problem is that if we have a look 37 00:01:49,940 --> 00:01:51,810 at those prebuilt colors, 38 00:01:51,810 --> 00:01:53,167 there are a couple of colors, 39 00:01:53,167 --> 00:01:55,420 and there also is a gray color, 40 00:01:55,420 --> 00:01:59,170 which ironically is a bit darker than dark gray. 41 00:01:59,170 --> 00:02:00,787 Yeah, it is what it is. 42 00:02:00,787 --> 00:02:04,720 But what if even that is not exactly the color I want? 43 00:02:04,720 --> 00:02:06,790 Now, the good thing is that, in web development, 44 00:02:06,790 --> 00:02:08,850 you can mix any color you want. 45 00:02:08,850 --> 00:02:11,320 You can create any color you want 46 00:02:11,320 --> 00:02:16,080 because there are over 16 million of supported colors. 47 00:02:16,080 --> 00:02:20,640 They're just not all prebuilt and stored under a name, 48 00:02:20,640 --> 00:02:22,540 because imagine what would happen 49 00:02:22,540 --> 00:02:25,810 if you had 16 million prebuilt colors. 50 00:02:25,810 --> 00:02:28,440 Yeah, that list would be quite long. 51 00:02:28,440 --> 00:02:32,620 Instead, there are different ways of creating a color. 52 00:02:32,620 --> 00:02:36,290 And one of the most common forms of creating a color, 53 00:02:36,290 --> 00:02:39,830 which still can look strange when you first learn about it, 54 00:02:39,830 --> 00:02:42,300 is using a hex code, 55 00:02:42,300 --> 00:02:44,750 but you might have seen that in our tools, 56 00:02:44,750 --> 00:02:47,300 for example, in Adobe Photoshop already. 57 00:02:47,300 --> 00:02:49,960 And hence, I'm showing it here as well. 58 00:02:49,960 --> 00:02:52,110 You can create a color with a hex code 59 00:02:52,110 --> 00:02:54,470 by adding a hash symbol here. 60 00:02:54,470 --> 00:02:57,100 And then you use a hexadecimal number, 61 00:02:57,100 --> 00:03:02,100 for example, five, three, four, B, four, B. 62 00:03:03,770 --> 00:03:07,370 If you use that, that is a dark gray color. 63 00:03:07,370 --> 00:03:10,000 And with a hexadecimal number, 64 00:03:10,000 --> 00:03:14,160 we simply point at one of those over 16 million colors. 65 00:03:14,160 --> 00:03:16,490 If we would be using the decimal system here, 66 00:03:16,490 --> 00:03:18,900 instead of the hexadecimal system, 67 00:03:18,900 --> 00:03:21,000 we simply would start typing 68 00:03:21,000 --> 00:03:23,540 very long color identifiers here. 69 00:03:23,540 --> 00:03:26,390 That's why we use the hexadecimal system instead. 70 00:03:26,390 --> 00:03:29,280 So that we have shorter codes here. 71 00:03:29,280 --> 00:03:31,440 And in the hexadecimal system, 72 00:03:31,440 --> 00:03:35,590 every color is expressed with six digits. 73 00:03:35,590 --> 00:03:39,110 And actually we can split these six digits 74 00:03:39,110 --> 00:03:42,240 into three pairs of two digits. 75 00:03:42,240 --> 00:03:46,640 And then they represent the red, green, and blue portion 76 00:03:46,640 --> 00:03:49,870 of a color because in web development, 77 00:03:49,870 --> 00:03:53,240 we can describe all those colors which we want to use 78 00:03:53,240 --> 00:03:56,440 with a mixture of red, green, and blue, 79 00:03:56,440 --> 00:03:59,360 and the hexadecimal value, which we have here, 80 00:03:59,360 --> 00:04:02,530 simply describes three individual parts, 81 00:04:02,530 --> 00:04:05,420 red, green, and blue, which together form one color, 82 00:04:05,420 --> 00:04:07,423 which has one unique identifier. 83 00:04:08,310 --> 00:04:10,840 Now this might be a bit overwhelming right now. 84 00:04:10,840 --> 00:04:12,127 And you might wonder, 85 00:04:12,127 --> 00:04:16,700 "How do you know which hexadecimal value represents 86 00:04:16,700 --> 00:04:18,839 the color you want to use?" 87 00:04:18,839 --> 00:04:22,280 Well, the great thing is, there are tools for that. 88 00:04:22,280 --> 00:04:24,460 If you Google for a color picker, 89 00:04:24,460 --> 00:04:27,380 you should find such a color picker right away, 90 00:04:27,380 --> 00:04:29,390 which is actually built into Google. 91 00:04:29,390 --> 00:04:31,670 Alternatively, you find some websites 92 00:04:31,670 --> 00:04:34,840 which also should offer you color pickers. 93 00:04:34,840 --> 00:04:37,140 And here you can play around with them 94 00:04:37,140 --> 00:04:39,770 and pick some colors here. 95 00:04:39,770 --> 00:04:42,430 And what you'll see in this Google color picker is 96 00:04:42,430 --> 00:04:45,820 that you automatically get the hex code 97 00:04:45,820 --> 00:04:49,800 and also a couple of other representations of that color, 98 00:04:49,800 --> 00:04:51,390 which you chose here. 99 00:04:51,390 --> 00:04:53,660 And you can always copy that hex code 100 00:04:53,660 --> 00:04:55,850 and use it in your web development code, 101 00:04:55,850 --> 00:04:57,370 in your CSS code, 102 00:04:57,370 --> 00:05:00,360 once you chose the color you want to use. 103 00:05:00,360 --> 00:05:04,230 Now, what's interesting is that you also see a couple 104 00:05:04,230 --> 00:05:08,730 of other representations of one and the same color here. 105 00:05:08,730 --> 00:05:11,280 All these values, which you see down there, 106 00:05:11,280 --> 00:05:15,440 describe the same color, for example, this orange color, 107 00:05:15,440 --> 00:05:17,360 which I picked here. 108 00:05:17,360 --> 00:05:18,890 And in web development, 109 00:05:18,890 --> 00:05:23,430 you are also not limited to just this hexadecimal notation 110 00:05:23,430 --> 00:05:25,190 if you don't like it. 111 00:05:25,190 --> 00:05:26,350 You can use it, 112 00:05:26,350 --> 00:05:29,260 but you can also describe the same color differently 113 00:05:29,260 --> 00:05:31,220 in web development as well. 114 00:05:31,220 --> 00:05:35,040 And here, the great thing is that in visual studio code, 115 00:05:35,040 --> 00:05:37,201 we actually got great support built-in 116 00:05:37,201 --> 00:05:40,620 that helps us with picking a color. 117 00:05:40,620 --> 00:05:45,620 If we hover over this color code, which we used here, 118 00:05:45,890 --> 00:05:50,330 then this built-in color picker overlay window 119 00:05:50,330 --> 00:05:53,240 should open up in a visual studio code. 120 00:05:53,240 --> 00:05:56,260 And here you can not only pick a color 121 00:05:56,260 --> 00:05:58,420 with that built color picker, 122 00:05:58,420 --> 00:06:03,000 but in addition, if you click on that picked color up there, 123 00:06:03,000 --> 00:06:06,320 you can also cycle between different notations, 124 00:06:06,320 --> 00:06:11,280 which you can use in web development for describing a color. 125 00:06:11,280 --> 00:06:15,810 You can switch to this RGB notation where you, again, 126 00:06:15,810 --> 00:06:19,590 describe a color as a mixture of red, green, and blue, 127 00:06:19,590 --> 00:06:24,290 but now actually using the decimal system and using values 128 00:06:24,290 --> 00:06:28,703 between zero and 255 for every color tone, 129 00:06:29,610 --> 00:06:32,579 or you can switch to the HSL notation, 130 00:06:32,579 --> 00:06:36,440 which stands for hue, saturation, lightness, 131 00:06:36,440 --> 00:06:39,700 which has a slightly different, more advanced approach, 132 00:06:39,700 --> 00:06:41,050 but which also allows you 133 00:06:41,050 --> 00:06:44,280 to describe one and the same color. 134 00:06:44,280 --> 00:06:46,710 And again, you can always use a color picker 135 00:06:46,710 --> 00:06:49,200 like you find here on Google to find out 136 00:06:49,200 --> 00:06:53,950 how those different values change if you change colors. 137 00:06:53,950 --> 00:06:56,740 And you can use either of these three ways 138 00:06:56,740 --> 00:06:58,390 of describing a color, 139 00:06:58,390 --> 00:07:03,390 a hexadecimal code, RGB, or HSL in web development. 140 00:07:04,600 --> 00:07:06,450 And attached to this lecture, 141 00:07:06,450 --> 00:07:09,310 you'll also find some extra resources 142 00:07:09,310 --> 00:07:11,920 that summarize these color concepts 143 00:07:11,920 --> 00:07:14,030 and ensure that you fully understand 144 00:07:14,030 --> 00:07:17,240 how you can define your colors. 145 00:07:17,240 --> 00:07:19,930 Now it is up to you which approach you prefer. 146 00:07:19,930 --> 00:07:23,450 In this course, we'll typically use this RGB notation, 147 00:07:23,450 --> 00:07:25,570 which you see here, but it is up to you, 148 00:07:25,570 --> 00:07:27,113 which one you prefer. 149 00:07:28,450 --> 00:07:30,610 And that's it for our colors right now. 150 00:07:30,610 --> 00:07:33,290 We will use a lot of colors throughout this course 151 00:07:33,290 --> 00:07:35,700 because most things look better 152 00:07:35,700 --> 00:07:38,020 if they're not just black and white. 153 00:07:38,020 --> 00:07:40,390 And therefore it is important to be aware 154 00:07:40,390 --> 00:07:44,810 of the different ways of setting colors in web development, 155 00:07:44,810 --> 00:07:47,510 that you have a lot of options when it comes to colors, 156 00:07:47,510 --> 00:07:49,340 a lot of colors you can use, 157 00:07:49,340 --> 00:07:53,020 and that you've got different ways of defining those colors. 158 00:07:53,020 --> 00:07:55,610 And here I'll now take this RGB color, 159 00:07:55,610 --> 00:07:56,860 this gray color, 160 00:07:56,860 --> 00:08:01,210 and also assign it as a color for this H-1 tag. 161 00:08:01,210 --> 00:08:03,350 And with that, if we save this, 162 00:08:03,350 --> 00:08:05,240 if I go back and reload, 163 00:08:05,240 --> 00:08:07,150 now we've got this grayish color 164 00:08:07,150 --> 00:08:10,053 for both the heading and the paragraph.