1 00:00:02,040 --> 00:00:06,870 So we are using two different HTML elements now, age one, 2 00:00:06,870 --> 00:00:09,524 and P, and that leads to dis output. 3 00:00:09,524 --> 00:00:11,472 Now, I don't know about you, 4 00:00:11,472 --> 00:00:15,470 but that output can definitely be improved visually. 5 00:00:15,470 --> 00:00:17,170 It is worth noting though, 6 00:00:17,170 --> 00:00:19,849 that we do have some default styling here. 7 00:00:19,849 --> 00:00:24,650 The heading the H one tag definitely looks different than 8 00:00:24,650 --> 00:00:25,845 our regular text. 9 00:00:25,845 --> 00:00:30,669 And the reason for that is that the browser by default 10 00:00:30,669 --> 00:00:35,669 assigns some styling to some, but not all HTML elements. 11 00:00:36,900 --> 00:00:37,733 And for example, 12 00:00:37,733 --> 00:00:41,373 the H one element receives some default styling. 13 00:00:41,373 --> 00:00:45,997 Now it is important that that default styling is a nice to 14 00:00:45,997 --> 00:00:50,308 have feature, but not something you should rely on. 15 00:00:50,308 --> 00:00:54,380 It differs between operating systems and browsers, 16 00:00:54,380 --> 00:00:59,180 and it can be overwritten with CSS, cascading style sheets, 17 00:00:59,180 --> 00:01:03,530 that second programming language, which I mentioned earlier. 18 00:01:03,530 --> 00:01:05,663 And therefore, typically as a developer, 19 00:01:06,694 --> 00:01:09,470 we want to add our own styles also because those default 20 00:01:09,470 --> 00:01:14,470 styles are not dead beautiful and are rarely what we want. 21 00:01:14,940 --> 00:01:15,773 And hence, 22 00:01:15,773 --> 00:01:18,880 we'll now dive into CSS and we're going to start writing 23 00:01:18,880 --> 00:01:22,822 some CSS code to change that styling. 24 00:01:22,822 --> 00:01:27,810 And I want to start with that H one element it's okay, 25 00:01:27,810 --> 00:01:30,678 but I want to change the font type. 26 00:01:30,678 --> 00:01:33,949 I want to switch to a different text font, 27 00:01:33,949 --> 00:01:38,220 and we also might want to center this text and maybe also 28 00:01:38,220 --> 00:01:41,490 change the color of this text slightly, 29 00:01:41,490 --> 00:01:45,330 and all that can be done with CSS. 30 00:01:45,330 --> 00:01:46,163 Now, 31 00:01:46,163 --> 00:01:49,541 how do we then add this CSS code and how does it look like 32 00:01:49,541 --> 00:01:51,880 adding it? Isn't too difficult. 33 00:01:51,880 --> 00:01:55,270 We just need to go to the element which we want to style. 34 00:01:55,270 --> 00:01:58,330 And then on this opening tack, 35 00:01:58,330 --> 00:02:01,250 before that greater than sign, 36 00:02:01,250 --> 00:02:05,450 we add a so-called HTML attribute. 37 00:02:05,450 --> 00:02:08,060 We do that by adding a white space here, 38 00:02:08,060 --> 00:02:11,900 and then add one of the support that attributes in this 39 00:02:11,900 --> 00:02:14,217 case, the style attribute. 40 00:02:14,217 --> 00:02:17,110 Now that's something we haven't done before though. 41 00:02:17,110 --> 00:02:21,220 HTML attributes are not something we used before now. 42 00:02:21,220 --> 00:02:26,210 Attributes are extra pieces of information you can add to 43 00:02:26,210 --> 00:02:31,210 your HTML elements and different HTML elements supports 44 00:02:31,558 --> 00:02:34,027 different attributes. For example, 45 00:02:34,027 --> 00:02:39,027 basically all HTML elements support the style attribute, 46 00:02:40,650 --> 00:02:44,914 and these attributes are always added on the opening tag. 47 00:02:44,914 --> 00:02:49,230 And then we can add extra pieces of information or change to 48 00:02:49,230 --> 00:02:53,430 behavior off that element on which we add them with those 49 00:02:53,430 --> 00:02:54,950 attributes. 50 00:02:54,950 --> 00:02:57,650 You can also learn more about the attributes if you hover 51 00:02:57,650 --> 00:03:00,590 over them individuals to do code, 52 00:03:00,590 --> 00:03:03,570 and you also get some helpful auto completion. 53 00:03:03,570 --> 00:03:06,290 If I start typing an S for example, 54 00:03:06,290 --> 00:03:09,070 I see all the attributes I can add to this age, 55 00:03:09,070 --> 00:03:12,510 one element and the fervor I type the more does this 56 00:03:13,382 --> 00:03:16,350 narrowed down until just the style is left, 57 00:03:16,350 --> 00:03:18,540 and then you can always hit tap to auto, 58 00:03:18,540 --> 00:03:22,070 complete this and have it added for you here. 59 00:03:22,070 --> 00:03:26,240 You also see now how you then complete such an attribute, 60 00:03:26,240 --> 00:03:30,640 how you assign a value because the attribute name as it's 61 00:03:30,640 --> 00:03:33,007 called here on the left side of this equal sign, 62 00:03:33,007 --> 00:03:35,140 just tells the browser, 63 00:03:35,140 --> 00:03:39,227 which attribute you want to set you then assign a value 64 00:03:39,227 --> 00:03:41,855 between double quotes, opening, 65 00:03:41,855 --> 00:03:46,855 and closing double quotes to well set the value for this 66 00:03:46,930 --> 00:03:50,289 attribute and which value you can set depends on which 67 00:03:50,289 --> 00:03:54,260 attribute you are setting in case of the style attribute. 68 00:03:54,260 --> 00:03:55,223 For example, 69 00:03:56,794 --> 00:04:00,570 we'll be able to set some CSS code as a value between those 70 00:04:00,570 --> 00:04:04,462 quotes and attributes are typically always set like this 71 00:04:04,462 --> 00:04:08,552 attribute name den no white space. That's important, 72 00:04:08,552 --> 00:04:13,552 no white space, equal sign, no white space, double quotes, 73 00:04:14,820 --> 00:04:16,430 opening, and closing. 74 00:04:16,430 --> 00:04:20,160 That's how you should set your attributes in HTML. 75 00:04:20,160 --> 00:04:24,800 Then that's how you can then change the behavior of HTML 76 00:04:24,800 --> 00:04:26,330 elements. 77 00:04:26,330 --> 00:04:30,000 So what is now the value we want to set for this style 78 00:04:30,000 --> 00:04:31,083 attribute here?