1 00:00:02,040 --> 00:00:04,403 This style attribute allows us to 2 00:00:04,403 --> 00:00:08,029 add some CSS styling to the element 3 00:00:08,029 --> 00:00:09,570 on which we're using it. 4 00:00:09,570 --> 00:00:11,526 In this case, on this H1 text, 5 00:00:11,526 --> 00:00:15,240 I want to start by changing the font. 6 00:00:15,240 --> 00:00:18,300 The text font, so the type of text we have here. 7 00:00:18,300 --> 00:00:20,260 So the look of the text. 8 00:00:20,260 --> 00:00:25,260 And we do this by adding font dash family, 9 00:00:25,290 --> 00:00:30,003 colon, and then in this case, sans dash serif here. 10 00:00:30,920 --> 00:00:33,210 Now what is this here? 11 00:00:33,210 --> 00:00:35,590 This is now some CSS code. 12 00:00:35,590 --> 00:00:38,260 That's how CSS code looks like. 13 00:00:38,260 --> 00:00:40,310 There's a bit more to it, which we'll learn later, 14 00:00:40,310 --> 00:00:43,690 but that is the heart of CSS. 15 00:00:43,690 --> 00:00:47,040 We can set different properties 16 00:00:47,040 --> 00:00:50,240 as this part in front of the colon is called 17 00:00:50,240 --> 00:00:52,410 of the HTML element which we're 18 00:00:52,410 --> 00:00:55,240 targeting with our CSS code. 19 00:00:55,240 --> 00:00:58,180 The font family property for example 20 00:00:58,180 --> 00:01:02,540 changes the type of font for this element. 21 00:01:02,540 --> 00:01:06,400 Now just as HTML elements are standardized, 22 00:01:06,400 --> 00:01:10,170 CSS properties are also standardized. 23 00:01:10,170 --> 00:01:13,140 And you can also find a long list of supported 24 00:01:13,140 --> 00:01:15,240 properties on MDN. 25 00:01:15,240 --> 00:01:17,620 Now as with the HTML elements, 26 00:01:17,620 --> 00:01:20,530 you should not learn that list by heart. 27 00:01:20,530 --> 00:01:23,680 There are many properties here which you will rarely use, 28 00:01:23,680 --> 00:01:26,200 and on the other hand, there are a couple of properties 29 00:01:26,200 --> 00:01:27,730 which you'll use all the time, 30 00:01:27,730 --> 00:01:30,380 and therefore you will learn by heart automatically 31 00:01:30,380 --> 00:01:32,850 by using them, and it's needless to say that 32 00:01:32,850 --> 00:01:35,140 throughout this course, we're going to write 33 00:01:35,140 --> 00:01:36,680 tons of CSS code, 34 00:01:36,680 --> 00:01:39,750 and we're going to explain CSS in great depth, 35 00:01:39,750 --> 00:01:42,203 and you're going to learn a lot about CSS. 36 00:01:43,120 --> 00:01:44,480 Now, here, 37 00:01:44,480 --> 00:01:47,750 you would find font family if you search for it, 38 00:01:47,750 --> 00:01:49,610 and then you can learn more about it. 39 00:01:49,610 --> 00:01:52,600 And you'll learn that that allows you to set the font, 40 00:01:52,600 --> 00:01:54,170 so the look of the text, 41 00:01:54,170 --> 00:01:57,730 for a specific HTML element. 42 00:01:57,730 --> 00:02:00,750 And here we have the example I'm using in my code. 43 00:02:00,750 --> 00:02:02,800 Font family sans serif. 44 00:02:02,800 --> 00:02:06,670 This sets the font family of this text in the H1 tag 45 00:02:06,670 --> 00:02:08,729 to a sans serif font. 46 00:02:08,729 --> 00:02:12,230 So to a text type which doesn't have serifs. 47 00:02:12,230 --> 00:02:15,480 Serifs are those little extensions you have 48 00:02:15,480 --> 00:02:18,740 on some characters, like that little bump 49 00:02:18,740 --> 00:02:21,420 at the end of the C here, which goes to the top. 50 00:02:21,420 --> 00:02:24,380 Or that little bar to the left on the H. 51 00:02:24,380 --> 00:02:28,350 And if I reload now, after setting this CSS code 52 00:02:28,350 --> 00:02:29,713 on this first element, 53 00:02:30,660 --> 00:02:32,500 you indeed see that it changes. 54 00:02:32,500 --> 00:02:34,670 Now this text looks different 55 00:02:34,670 --> 00:02:39,670 because now we changed the styling of this text with CSS. 56 00:02:40,190 --> 00:02:44,120 And that is how we can get started with CSS. 57 00:02:44,120 --> 00:02:49,120 We can't add our CSS styles directly on HTML elements. 58 00:02:50,780 --> 00:02:53,840 And we always can assign CSS styles 59 00:02:53,840 --> 00:02:56,380 by targeting a specific property, 60 00:02:56,380 --> 00:02:59,420 one of the standardized and supported properties 61 00:02:59,420 --> 00:03:01,720 from that list of properties here. 62 00:03:01,720 --> 00:03:03,440 And then we have a colon, 63 00:03:03,440 --> 00:03:06,200 and then a value for that property. 64 00:03:06,200 --> 00:03:09,120 And which value you can assign for which property 65 00:03:09,120 --> 00:03:11,570 depends on the property you're using. 66 00:03:11,570 --> 00:03:13,820 But again, we're going to see many properties 67 00:03:13,820 --> 00:03:16,653 and many values, and many different kinds of values 68 00:03:16,653 --> 00:03:18,280 throughout this course. 69 00:03:18,280 --> 00:03:22,300 So that's all something that will come with experience. 70 00:03:22,300 --> 00:03:24,160 Now in this case, I don't just want to set 71 00:03:24,160 --> 00:03:26,390 the font family to sans serif. 72 00:03:26,390 --> 00:03:29,560 I also want to center this text. 73 00:03:29,560 --> 00:03:32,100 We can do this with another property. 74 00:03:32,100 --> 00:03:34,650 Now if you want to add more than one property 75 00:03:34,650 --> 00:03:38,080 on one of the same element, we can simply separate them 76 00:03:38,080 --> 00:03:39,770 with a semi-colon. 77 00:03:39,770 --> 00:03:44,290 So you add a semi-colon after your first property value pair 78 00:03:44,290 --> 00:03:46,500 and then you can add your second pair. 79 00:03:46,500 --> 00:03:48,280 And I'm adding an extra wide space here 80 00:03:48,280 --> 00:03:50,200 which is not needed technically, 81 00:03:50,200 --> 00:03:52,982 but makes it a bit easier to read. 82 00:03:52,982 --> 00:03:57,158 You could also start right after the semi-colon. 83 00:03:57,158 --> 00:04:00,240 And the second property which I want to add here 84 00:04:00,240 --> 00:04:03,500 is the text dash align property. 85 00:04:03,500 --> 00:04:06,370 And you see that I'm getting auto-completion here. 86 00:04:06,370 --> 00:04:09,900 That's another nice feature of this code. 87 00:04:09,900 --> 00:04:12,460 It's not just helping with auto-completion 88 00:04:12,460 --> 00:04:15,210 for attributes and HTML elements, 89 00:04:15,210 --> 00:04:18,649 it also helps with auto-completion for CSS code. 90 00:04:18,649 --> 00:04:19,640 And that means that here, 91 00:04:19,640 --> 00:04:21,269 as soon as I start typing, 92 00:04:21,269 --> 00:04:23,890 it for example, already suggests 93 00:04:23,890 --> 00:04:26,900 that I might want to use text dash align. 94 00:04:26,900 --> 00:04:30,830 So if I hit enter again, this is partially completed, 95 00:04:30,830 --> 00:04:34,240 and now it even helps me pick a value. 96 00:04:34,240 --> 00:04:36,630 So when I said that there are different values 97 00:04:36,630 --> 00:04:38,560 for different kinds of properties, 98 00:04:38,560 --> 00:04:42,470 the good thing is that IVE is like visuals to the code 99 00:04:42,470 --> 00:04:44,600 help you choose the right value 100 00:04:44,600 --> 00:04:46,820 because they give you suggestions. 101 00:04:46,820 --> 00:04:49,070 And if I would try to enter a value here 102 00:04:49,070 --> 00:04:52,410 which is not supported, I don't get an error, 103 00:04:52,410 --> 00:04:55,350 but I see that I don't get any auto-completion 104 00:04:55,350 --> 00:04:56,990 as I continue typing. 105 00:04:56,990 --> 00:05:00,260 And that often is an indicator that something's wrong 106 00:05:00,260 --> 00:05:01,423 about that value. 107 00:05:02,280 --> 00:05:05,270 So here, I'll bring back those auto-suggestions 108 00:05:05,270 --> 00:05:09,710 by hitting Control Space on my keyboard, 109 00:05:09,710 --> 00:05:11,309 and then we can pick Center 110 00:05:11,309 --> 00:05:13,470 as a text alignment. 111 00:05:13,470 --> 00:05:17,792 To center this H1 text, and if we do that 112 00:05:17,792 --> 00:05:20,830 and we go back and reload this page, 113 00:05:20,830 --> 00:05:24,510 now this text indeed is centered. 114 00:05:24,510 --> 00:05:28,220 So that's how we added another piece of CSS here. 115 00:05:28,220 --> 00:05:30,790 And now I've got a challenge for you. 116 00:05:30,790 --> 00:05:33,670 I want to change the color of this text 117 00:05:33,670 --> 00:05:37,130 and we're going to do that together in the next lecture, 118 00:05:37,130 --> 00:05:39,960 but you might want to try this on your own. 119 00:05:39,960 --> 00:05:42,890 Now we haven't learned about the color property yet, 120 00:05:42,890 --> 00:05:46,330 but maybe you can find it in the CSS reference. 121 00:05:46,330 --> 00:05:49,174 Because the name of the property you'll need 122 00:05:49,174 --> 00:05:50,600 is rather straight-forward. 123 00:05:50,600 --> 00:05:53,780 And then try setting a color on your own. 124 00:05:53,780 --> 00:05:57,750 And to keep it simple, set the color to red. 125 00:05:57,750 --> 00:06:01,890 So use red, the text red as a value. 126 00:06:01,890 --> 00:06:04,800 So you will add whatever property you need here. 127 00:06:04,800 --> 00:06:06,290 That's what you need to find out, 128 00:06:06,290 --> 00:06:10,260 and you should set it to a value of red. 129 00:06:10,260 --> 00:06:11,950 That's my challenge for you. 130 00:06:11,950 --> 00:06:14,288 We're going to set the right property together 131 00:06:14,288 --> 00:06:15,923 in the next lecture.