1 00:00:02,170 --> 00:00:04,630 Now that we added this link here, 2 00:00:04,630 --> 00:00:07,546 we might want to style this link in our own way and not 3 00:00:07,546 --> 00:00:10,530 stick to the default styles we got here. 4 00:00:10,530 --> 00:00:11,850 But before we do that, 5 00:00:11,850 --> 00:00:15,450 let's revisit the styles we have on the other elements. 6 00:00:15,450 --> 00:00:16,710 Up to this point, 7 00:00:16,710 --> 00:00:21,230 we always added styles by setting that style attribute. 8 00:00:21,230 --> 00:00:23,360 And now already we can see 9 00:00:23,360 --> 00:00:25,988 a huge disadvantage of using this approach. 10 00:00:25,988 --> 00:00:29,360 It worked fine if we only had one or two elements, 11 00:00:29,360 --> 00:00:31,633 but now that we have more and more elements, 12 00:00:31,633 --> 00:00:35,860 we have a lot of CSS code right in our HTML code, 13 00:00:35,860 --> 00:00:38,662 which leads to very long HTML elements. 14 00:00:38,662 --> 00:00:42,202 And in addition, we have code duplication. 15 00:00:42,202 --> 00:00:46,435 These two paragraphs have exactly the same style values, 16 00:00:46,435 --> 00:00:50,470 and we need to duplicate this because every style affects 17 00:00:50,470 --> 00:00:52,561 just the element on which you added it. 18 00:00:52,561 --> 00:00:55,330 Now, of course, it's very realistic 19 00:00:55,330 --> 00:00:56,816 that we're building a website with 20 00:00:56,816 --> 00:01:00,380 dozens or maybe hundreds of paragraphs. 21 00:01:00,380 --> 00:01:03,310 And if we then have to copy and paste the styles 22 00:01:03,310 --> 00:01:04,739 to all those paragraphs, 23 00:01:04,739 --> 00:01:07,019 that can quickly become very annoying. 24 00:01:07,019 --> 00:01:09,250 And it's not just annoying, 25 00:01:09,250 --> 00:01:11,469 if we ever decide to change something, 26 00:01:11,469 --> 00:01:15,380 let's say we want to pick a slightly different color here. 27 00:01:15,380 --> 00:01:17,090 If we ever decide to do that, 28 00:01:17,090 --> 00:01:20,750 we then need to copy that change 29 00:01:20,750 --> 00:01:23,188 onto all the other paragraphs. 30 00:01:23,188 --> 00:01:26,110 And that's just not realistic. 31 00:01:26,110 --> 00:01:27,370 I'll undo it here, 32 00:01:27,370 --> 00:01:29,850 but that is something which we could be doing. 33 00:01:29,850 --> 00:01:32,020 And that's just not something we want to do, 34 00:01:32,020 --> 00:01:34,290 that makes our website very difficult 35 00:01:34,290 --> 00:01:36,143 to develop and maintain. 36 00:01:37,100 --> 00:01:39,327 And therefore, adding styles like this, 37 00:01:39,327 --> 00:01:42,770 through this style attribute and approach, 38 00:01:42,770 --> 00:01:45,230 which is called inline styles 39 00:01:45,230 --> 00:01:47,170 because you add the style definitions 40 00:01:47,170 --> 00:01:50,310 inline with the element on which you're adding them. 41 00:01:50,310 --> 00:01:51,810 That is something you can do, 42 00:01:51,810 --> 00:01:54,600 but it's not the most common way of adding styles. 43 00:01:54,600 --> 00:01:58,390 Instead, you typically define styles globally, 44 00:01:58,390 --> 00:02:03,200 and you define on which elements, on which kind of elements, 45 00:02:03,200 --> 00:02:05,500 certain styles should be applied, 46 00:02:05,500 --> 00:02:08,199 so that you don't have to add them individually 47 00:02:08,199 --> 00:02:10,229 to multiple elements. 48 00:02:10,229 --> 00:02:13,940 And for that, we can add a new HTML element 49 00:02:13,940 --> 00:02:16,880 here at the top of our index HTML file. 50 00:02:16,880 --> 00:02:20,410 And that's the style element. 51 00:02:20,410 --> 00:02:23,230 And that's not a special element. 52 00:02:23,230 --> 00:02:24,730 Up to this point, 53 00:02:24,730 --> 00:02:29,264 all the elements we used H1 paragraph and anchor element, 54 00:02:29,264 --> 00:02:31,240 rendered something on the screen, 55 00:02:31,240 --> 00:02:32,398 which we could see. 56 00:02:32,398 --> 00:02:35,600 So all these elements output something visible. 57 00:02:35,600 --> 00:02:38,150 In the case of the elements we used thus far, 58 00:02:38,150 --> 00:02:39,859 they output text. 59 00:02:39,859 --> 00:02:42,520 Now the style element is different. 60 00:02:42,520 --> 00:02:43,840 It's invisible. 61 00:02:43,840 --> 00:02:47,540 It doesn't render or show anything on the screen. 62 00:02:47,540 --> 00:02:52,540 If I add style here and I add a S in there and I reload, 63 00:02:53,490 --> 00:02:55,560 we don't see that on the screen. 64 00:02:55,560 --> 00:02:58,470 But adding an S in there is also not correct. 65 00:02:58,470 --> 00:03:01,380 Instead the style element is there 66 00:03:01,380 --> 00:03:03,480 to allow us as a developer, 67 00:03:03,480 --> 00:03:07,508 to define some CSS code between the style text. 68 00:03:07,508 --> 00:03:10,650 So what we added on the style attribute, 69 00:03:10,650 --> 00:03:12,760 on the individual elements, 70 00:03:12,760 --> 00:03:15,691 can now be defined here between the style text, 71 00:03:15,691 --> 00:03:18,560 just in a slightly different way. 72 00:03:18,560 --> 00:03:21,170 Because now with that style element, 73 00:03:21,170 --> 00:03:24,970 we can define global CSS styles 74 00:03:24,970 --> 00:03:28,400 and to be precise in this style element, 75 00:03:28,400 --> 00:03:32,500 we define so-called CSS rules, 76 00:03:32,500 --> 00:03:34,550 which look like this. 77 00:03:34,550 --> 00:03:39,550 CSS rules are more than the property value assignments 78 00:03:39,790 --> 00:03:41,720 we got in our style attribute. 79 00:03:41,720 --> 00:03:42,820 Here we just said, 80 00:03:42,820 --> 00:03:44,240 which properties should be set 81 00:03:44,240 --> 00:03:46,100 to which values for the element 82 00:03:46,100 --> 00:03:48,660 on which we added the style attribute. 83 00:03:48,660 --> 00:03:50,590 With CSS rules 84 00:03:50,590 --> 00:03:53,010 we can now define global rules, 85 00:03:53,010 --> 00:03:55,335 which affect multiple elements at once. 86 00:03:55,335 --> 00:03:58,401 And for this, we need to add some extra information. 87 00:03:58,401 --> 00:04:02,460 We do still have our property value assignment, 88 00:04:02,460 --> 00:04:03,293 but in addition, 89 00:04:03,293 --> 00:04:07,570 we also got a so-called selector and then some curly braces, 90 00:04:07,570 --> 00:04:10,260 and then the property value payers 91 00:04:10,260 --> 00:04:12,410 between those curly braces. 92 00:04:12,410 --> 00:04:14,620 And this selector is important. 93 00:04:14,620 --> 00:04:17,070 This selector tells the browser 94 00:04:17,070 --> 00:04:22,070 for which elements on our page, these styles should be set. 95 00:04:22,430 --> 00:04:25,430 And in this case, we have a so-called type selector, 96 00:04:25,430 --> 00:04:27,000 this P selector, 97 00:04:27,000 --> 00:04:30,060 which would say that all paragraph elements, 98 00:04:30,060 --> 00:04:33,730 So we have the element name here without the angle brackets 99 00:04:33,730 --> 00:04:37,200 that all paragraph elements should receive the styling 100 00:04:37,200 --> 00:04:39,969 defined between the curly braces. 101 00:04:39,969 --> 00:04:42,110 And we can now apply this here as well. 102 00:04:42,110 --> 00:04:45,810 We could say that we want to target all paragraph elements 103 00:04:45,810 --> 00:04:50,810 by writing P here, and then opening and closing curly brace. 104 00:04:50,830 --> 00:04:52,880 And then between the curly braces, 105 00:04:52,880 --> 00:04:56,010 we set our different CSS styles. 106 00:04:56,010 --> 00:04:58,830 So we can cut the styles from down there, 107 00:04:58,830 --> 00:05:02,400 from the style attribute and add them here. 108 00:05:02,400 --> 00:05:04,240 And now it's just common to split them 109 00:05:04,240 --> 00:05:06,012 across multiple lines, 110 00:05:06,012 --> 00:05:08,540 every line ending with a semi-colon 111 00:05:08,540 --> 00:05:10,460 to make it more readable. 112 00:05:10,460 --> 00:05:13,530 So that's how our CSS code should look like. 113 00:05:13,530 --> 00:05:17,160 Multiple property value pairs for one selector, 114 00:05:17,160 --> 00:05:19,810 and every line ends with a semi-colon 115 00:05:19,810 --> 00:05:22,723 and all the lines are between curly braces. 116 00:05:23,980 --> 00:05:26,950 And then we can remove this style attribute here 117 00:05:26,950 --> 00:05:29,943 and also on this second paragraph. 118 00:05:31,120 --> 00:05:35,650 And now, even though I removed those style attributes, 119 00:05:35,650 --> 00:05:38,610 if we saved this file and we reload, 120 00:05:38,610 --> 00:05:41,670 we see that nothing changes there visually 121 00:05:41,670 --> 00:05:43,530 and that simply proves 122 00:05:43,530 --> 00:05:46,380 that our styles are still being applied. 123 00:05:46,380 --> 00:05:50,330 But if we inspect our content here with the dev tools, 124 00:05:50,330 --> 00:05:53,010 we indeed can spot a difference here. 125 00:05:53,010 --> 00:05:55,690 We see that for the two paragraph text, 126 00:05:55,690 --> 00:06:00,430 the styling actually comes from this rule here, 127 00:06:00,430 --> 00:06:03,124 and it even tells us where this rule is defined 128 00:06:03,124 --> 00:06:07,190 that it's in the index HTML file in line two. 129 00:06:07,190 --> 00:06:09,760 And if we have a look at our file, that's correct. 130 00:06:09,760 --> 00:06:11,890 The rule that affects these elements 131 00:06:11,890 --> 00:06:14,140 starts here in line two. 132 00:06:14,140 --> 00:06:17,030 It's this paragraph selector rule. 133 00:06:17,030 --> 00:06:19,660 And of course we can not just do this for the paragraph, 134 00:06:19,660 --> 00:06:22,170 we can also do this for the H1 element 135 00:06:22,170 --> 00:06:24,720 and target the H1 element here, 136 00:06:24,720 --> 00:06:29,080 and then copy our styles or cut our styles 137 00:06:29,080 --> 00:06:30,240 add them here, 138 00:06:30,240 --> 00:06:32,680 split them across multiple lines, 139 00:06:32,680 --> 00:06:34,209 and then set it like this, 140 00:06:34,209 --> 00:06:36,963 and remove the style attribute down there. 141 00:06:38,010 --> 00:06:41,070 And with that we're targeting, all H1 elements, 142 00:06:41,070 --> 00:06:43,360 even though we only have one element here 143 00:06:43,360 --> 00:06:46,333 and we're setting our styles for those elements. 144 00:06:47,450 --> 00:06:48,283 And now of course, 145 00:06:48,283 --> 00:06:51,760 we still have to same styles for these two different rules, 146 00:06:51,760 --> 00:06:55,590 but we don't have the duplication for the same elements 147 00:06:55,590 --> 00:06:58,630 as we had it before with the same style attribute 148 00:06:58,630 --> 00:07:01,190 being set for all the paragraphs. 149 00:07:01,190 --> 00:07:04,170 And of course, we still have some style duplication here 150 00:07:04,170 --> 00:07:06,300 between the H1 of the paragraph tag, 151 00:07:06,300 --> 00:07:08,710 and there would be ways of reducing this as well, 152 00:07:08,710 --> 00:07:10,580 but we're not going to do this right now 153 00:07:10,580 --> 00:07:13,620 because I'm soon going to change those styles a little bit. 154 00:07:13,620 --> 00:07:15,160 And in addition, 155 00:07:15,160 --> 00:07:17,270 it's also something which will lead us deeper 156 00:07:17,270 --> 00:07:19,340 down into the CSS rabbit hole. 157 00:07:19,340 --> 00:07:21,140 And we're going to take that path 158 00:07:21,140 --> 00:07:23,020 a little bit later in the course. 159 00:07:23,020 --> 00:07:26,901 But adding styles like this is a major step forward because 160 00:07:26,901 --> 00:07:29,660 that will help us get our CSS code 161 00:07:29,660 --> 00:07:31,940 out of the HTML code down there, 162 00:07:31,940 --> 00:07:35,310 which makes this HTML code way more readable, 163 00:07:35,310 --> 00:07:38,140 it leads to shorter lines, for example. 164 00:07:38,140 --> 00:07:39,340 And in addition, 165 00:07:39,340 --> 00:07:43,650 we don't have that unnecessary duplication across elements 166 00:07:43,650 --> 00:07:47,393 and the error proneness that is related to that.