1 00:00:02,040 --> 00:00:03,660 Were you successful? 2 00:00:03,660 --> 00:00:06,300 Let's set the color together now. 3 00:00:06,300 --> 00:00:10,170 Now we got a long reference of possible values, 4 00:00:10,170 --> 00:00:12,920 but maybe you searched for color 5 00:00:13,770 --> 00:00:17,860 and you then might have found the background color as well, 6 00:00:17,860 --> 00:00:19,280 but as the name implies, 7 00:00:19,280 --> 00:00:22,020 that would set the background color of a text, 8 00:00:22,020 --> 00:00:24,470 not the text color itself. 9 00:00:24,470 --> 00:00:26,230 But if you continue searching, 10 00:00:26,230 --> 00:00:29,830 at some point after finding a lot of other colors, 11 00:00:29,830 --> 00:00:32,750 you should find just color. 12 00:00:32,750 --> 00:00:34,650 Now maybe you search for text color, 13 00:00:34,650 --> 00:00:37,710 and indeed that property does not exist, 14 00:00:37,710 --> 00:00:41,100 but you might've found the color property, 15 00:00:41,100 --> 00:00:44,080 which has just written like this, color. 16 00:00:44,080 --> 00:00:47,870 And that's how you can add a color to an element. 17 00:00:47,870 --> 00:00:50,480 Now there are different ways of setting colors, 18 00:00:50,480 --> 00:00:53,030 and I'll talk about those in a second, 19 00:00:53,030 --> 00:00:55,920 but the most straight forward way of setting a color 20 00:00:55,920 --> 00:00:58,930 is to set the color property, then a colon, 21 00:00:58,930 --> 00:01:03,080 and then use one of the built-in colors like red. 22 00:01:03,080 --> 00:01:05,940 There are other built-in colors as well. 23 00:01:05,940 --> 00:01:07,260 And in Visual Studio Code 24 00:01:07,260 --> 00:01:10,450 you even get that nice auto-completion here 25 00:01:10,450 --> 00:01:12,280 where it gives you a little preview 26 00:01:12,280 --> 00:01:15,940 of how the color looks like on the left of the text. 27 00:01:15,940 --> 00:01:17,460 So that's pretty nice. 28 00:01:17,460 --> 00:01:19,840 And here I want to use red. 29 00:01:19,840 --> 00:01:24,363 And if we set that then, if we reload, this text is red. 30 00:01:25,260 --> 00:01:28,730 So that's how we can now also set the color. 31 00:01:28,730 --> 00:01:31,090 And there are more properties we can add 32 00:01:31,090 --> 00:01:33,020 and more properties we'll learn about 33 00:01:33,020 --> 00:01:34,190 throughout this course, 34 00:01:34,190 --> 00:01:36,790 but that's it for the moment. 35 00:01:36,790 --> 00:01:39,440 What I want to point out at this point, though, 36 00:01:39,440 --> 00:01:41,290 is that with CSS, 37 00:01:41,290 --> 00:01:45,460 you can totally change how your content looks. 38 00:01:45,460 --> 00:01:50,030 We could also make this non-bold or shrink the text. 39 00:01:50,030 --> 00:01:53,410 So the default styling assigned by the browser 40 00:01:53,410 --> 00:01:55,090 is nice to have, 41 00:01:55,090 --> 00:01:59,100 but it's not why we use certain HTML elements. 42 00:01:59,100 --> 00:02:01,570 We're not using the h1 element 43 00:02:01,570 --> 00:02:05,110 because that then, by default, is bold and big. 44 00:02:05,110 --> 00:02:08,009 We could change all of that with CSS 45 00:02:08,009 --> 00:02:12,430 and we could make a paragraph bold and big as well. 46 00:02:12,430 --> 00:02:16,750 Instead, we really just use different HTML elements 47 00:02:16,750 --> 00:02:20,740 to convey different meanings and to set the meaning, 48 00:02:20,740 --> 00:02:23,700 which has then picked up by search engines 49 00:02:23,700 --> 00:02:26,410 and by assistive technologies. 50 00:02:26,410 --> 00:02:29,850 The look is not why we use a certain element. 51 00:02:29,850 --> 00:02:30,930 Instead for this, 52 00:02:30,930 --> 00:02:34,760 we use CSS and now you got a first introduction 53 00:02:34,760 --> 00:02:36,733 into the CSS syntax.