1 00:00:02,070 --> 00:00:04,030 So let's work on the list styling now 2 00:00:04,030 --> 00:00:06,080 on these unordered lists. 3 00:00:06,080 --> 00:00:08,690 And here I actually wanna have the same styling 4 00:00:08,690 --> 00:00:10,240 for both lists, 5 00:00:10,240 --> 00:00:15,240 hence we can work with just the ul and li selectors 6 00:00:15,320 --> 00:00:18,170 but if we would want different styles, 7 00:00:18,170 --> 00:00:21,850 then we could work with the ID selector, for example, 8 00:00:21,850 --> 00:00:26,850 and give this second list an id of css-list, for example. 9 00:00:27,690 --> 00:00:32,689 And give that first list an id of html-list. 10 00:00:34,120 --> 00:00:36,260 And then in the CSS file, 11 00:00:36,260 --> 00:00:41,170 we can use the CSS ID selector with hash 12 00:00:41,170 --> 00:00:43,550 and then the ID you wanna target 13 00:00:43,550 --> 00:00:47,530 to target just that element that has that ID. 14 00:00:47,530 --> 00:00:49,970 But again, that's not something we need here. 15 00:00:49,970 --> 00:00:53,380 Just something which I also wanted to mention briefly 16 00:00:53,380 --> 00:00:57,713 because often the ID selector can be very useful. 17 00:00:58,700 --> 00:00:59,610 Here it's not. 18 00:00:59,610 --> 00:01:02,200 Here I wanna target all unordered lists, 19 00:01:02,200 --> 00:01:06,920 and hence, I'll use just the ul selector like this. 20 00:01:06,920 --> 00:01:09,260 And then here I first, of all, 21 00:01:09,260 --> 00:01:11,750 wanna clear the default margin 22 00:01:11,750 --> 00:01:16,140 and padding, which this list has out of the box. 23 00:01:16,140 --> 00:01:18,660 By setting margin to zero, 24 00:01:18,660 --> 00:01:21,830 so to zero pixels but for zero, 25 00:01:21,830 --> 00:01:24,400 you don't need to write pixels, 26 00:01:24,400 --> 00:01:26,900 just zero is enough, 27 00:01:26,900 --> 00:01:28,500 and the same for padding. 28 00:01:28,500 --> 00:01:30,583 Set this to zero as well. 29 00:01:31,640 --> 00:01:34,790 And I will also clear the default list style 30 00:01:34,790 --> 00:01:37,020 of having those bullet points 31 00:01:37,020 --> 00:01:39,550 by setting list-style to none, 32 00:01:39,550 --> 00:01:42,180 and as you learned, because of inheritance, 33 00:01:42,180 --> 00:01:43,500 this will then be applied 34 00:01:43,500 --> 00:01:46,173 to all the list items in that list. 35 00:01:47,940 --> 00:01:49,750 So with that, if I save this, 36 00:01:49,750 --> 00:01:53,080 you see the indentation is gone, 37 00:01:53,080 --> 00:01:57,050 which was achieved with help of margin and padding. 38 00:01:57,050 --> 00:02:00,710 It's gone since I set margin and padding to zero. 39 00:02:00,710 --> 00:02:02,833 And the bullet points are gone. 40 00:02:03,860 --> 00:02:07,250 And now I wanna style the list items manually. 41 00:02:07,250 --> 00:02:10,803 So I'll target the list items here. 42 00:02:10,803 --> 00:02:15,020 And then let's say every list item should now have a margin. 43 00:02:15,020 --> 00:02:16,800 So not the overall list 44 00:02:16,800 --> 00:02:19,050 but the single list items in the list 45 00:02:20,070 --> 00:02:22,400 of 14 pixels top and bottom 46 00:02:22,400 --> 00:02:24,980 but zero left and right. 47 00:02:24,980 --> 00:02:28,760 And again, I'm using that shorthand notation here 48 00:02:28,760 --> 00:02:31,930 where I don't just have one number but two numbers. 49 00:02:31,930 --> 00:02:34,480 First number is vertical axis, 50 00:02:34,480 --> 00:02:36,893 second number is horizontal axis. 51 00:02:38,060 --> 00:02:40,090 And with that, if I save this, 52 00:02:40,090 --> 00:02:43,470 we get some spacing between those list items. 53 00:02:43,470 --> 00:02:46,050 Now, some indentation would be nice 54 00:02:46,050 --> 00:02:48,890 and for that, we could set a margin 55 00:02:48,890 --> 00:02:52,560 to the left, for example, with margin-left 56 00:02:52,560 --> 00:02:55,800 but I'll instead use padding-left. 57 00:02:55,800 --> 00:02:58,120 And for the moment, it doesn't matter 58 00:02:58,120 --> 00:03:00,550 whether we use margin or padding 59 00:03:00,550 --> 00:03:03,220 but in a few seconds, it will matter. 60 00:03:03,220 --> 00:03:05,300 So let's use padding-left here 61 00:03:05,300 --> 00:03:07,373 and I'll set this to 10 pixels. 62 00:03:08,520 --> 00:03:10,710 Now, why will it matter though? 63 00:03:10,710 --> 00:03:15,120 Because I wanna highlight some of these list items. 64 00:03:15,120 --> 00:03:17,340 Some of those list items here 65 00:03:17,340 --> 00:03:21,420 should have a yellow marker on the left, 66 00:03:21,420 --> 00:03:23,670 a yellow border on the left 67 00:03:23,670 --> 00:03:25,590 and some yellow text 68 00:03:25,590 --> 00:03:30,590 to highlight them as extra important so to say. 69 00:03:30,750 --> 00:03:33,880 And for that, I need a way of selecting some 70 00:03:33,880 --> 00:03:36,850 of those list items but not all of them. 71 00:03:36,850 --> 00:03:41,423 Now, the li selector always selects all list items. 72 00:03:42,290 --> 00:03:44,870 Now, we could think about using IDs 73 00:03:44,870 --> 00:03:47,740 but I wanna select more than one list item. 74 00:03:47,740 --> 00:03:50,070 And since IDs need to be unique, 75 00:03:50,070 --> 00:03:54,600 IDs and ID selectors aren't the solution here either. 76 00:03:54,600 --> 00:03:58,600 And that's why we have class selectors and classes, 77 00:03:58,600 --> 00:04:01,483 which we can add to our HTML elements. 78 00:04:02,460 --> 00:04:07,460 All HTML elements can take that special class attribute. 79 00:04:07,875 --> 00:04:10,990 And I'll add it here to this first list item 80 00:04:10,990 --> 00:04:13,160 in the HTML list. 81 00:04:13,160 --> 00:04:16,480 Here I'll add the class HTML attribute 82 00:04:16,480 --> 00:04:20,880 and the value here can be any identifier of your choice, 83 00:04:20,880 --> 00:04:24,500 which typically should be all lowercase though 84 00:04:24,500 --> 00:04:28,800 with different words separated by dashes. 85 00:04:28,800 --> 00:04:33,310 And here I'll use the extra-important identifier. 86 00:04:33,310 --> 00:04:36,713 But again, this identifier text is up to you. 87 00:04:37,760 --> 00:04:41,560 Now, I will add this class to more than one element, 88 00:04:41,560 --> 00:04:44,030 otherwise I could have used an ID. 89 00:04:44,030 --> 00:04:47,037 I'll add it to this third list item here, for example, 90 00:04:47,037 --> 00:04:48,373 and to the fourth one. 91 00:04:49,860 --> 00:04:51,430 And in the CSS list, 92 00:04:51,430 --> 00:04:54,790 I'll add it to the third item, 93 00:04:54,790 --> 00:04:58,510 and I'm adding it to the last item, let's say. 94 00:04:58,510 --> 00:05:02,880 So now some list items have that extra class. 95 00:05:02,880 --> 00:05:05,430 And why did I add that class? 96 00:05:05,430 --> 00:05:08,420 So that I can now target it in CSS 97 00:05:08,420 --> 00:05:11,360 and apply some extra styles. 98 00:05:11,360 --> 00:05:13,510 So here in the styles.css file, 99 00:05:13,510 --> 00:05:16,210 we can now target those elements 100 00:05:16,210 --> 00:05:18,420 that have this class. 101 00:05:18,420 --> 00:05:20,030 And how do we do that? 102 00:05:20,030 --> 00:05:23,210 With a dot and then the class name. 103 00:05:23,210 --> 00:05:28,210 That's this CSS class selector, which we can use. 104 00:05:28,300 --> 00:05:31,800 So here I'll then use extra-important 105 00:05:31,800 --> 00:05:33,580 right after the dot. 106 00:05:33,580 --> 00:05:37,620 No white space between dot and the identifier. 107 00:05:37,620 --> 00:05:40,180 It's directly thereafter. 108 00:05:40,180 --> 00:05:41,890 And now we can set the styles 109 00:05:41,890 --> 00:05:44,200 for all the HTML elements 110 00:05:44,200 --> 00:05:47,173 that have this class identifier. 111 00:05:48,280 --> 00:05:53,280 And here I'll then give them a color of rgb 255, 237, 177 112 00:05:58,570 --> 00:06:01,303 and I wanna give them a border to the left. 113 00:06:02,200 --> 00:06:05,920 And for this, I'll add border-left 114 00:06:05,920 --> 00:06:08,990 but I will actually not just add it 115 00:06:08,990 --> 00:06:11,730 to those extra-important elements 116 00:06:11,730 --> 00:06:13,890 but to all elements. 117 00:06:13,890 --> 00:06:16,340 But to show you why, let's start adding it 118 00:06:16,340 --> 00:06:19,390 just to the extra-important elements. 119 00:06:19,390 --> 00:06:21,040 For this, we, first of all, 120 00:06:21,040 --> 00:06:23,580 specify the width of that border. 121 00:06:23,580 --> 00:06:25,940 And here I'll choose five pixels. 122 00:06:25,940 --> 00:06:30,940 Then this border value wants to know the style 123 00:06:31,100 --> 00:06:34,180 of the border, so which type of border it should be. 124 00:06:34,180 --> 00:06:36,840 And there you can use dashed, for example, 125 00:06:36,840 --> 00:06:38,930 but I'll go with solid 126 00:06:38,930 --> 00:06:41,670 to have a standard solid border. 127 00:06:41,670 --> 00:06:44,690 And then we need to set the color of this border. 128 00:06:44,690 --> 00:06:47,072 And that overall then forms the value, 129 00:06:47,072 --> 00:06:49,570 the border or the border-left, 130 00:06:49,570 --> 00:06:53,160 right, bottom and top properties want. 131 00:06:53,160 --> 00:06:56,050 And you can style the border overall 132 00:06:56,050 --> 00:06:58,970 to set a border on all edges 133 00:06:58,970 --> 00:07:01,150 or target specific sites 134 00:07:01,150 --> 00:07:04,630 with border-left, border-right, and so on. 135 00:07:04,630 --> 00:07:06,283 And that's what we're doing here. 136 00:07:07,280 --> 00:07:11,257 And the color I wanna use is rgb 247, 209, 85. 137 00:07:15,710 --> 00:07:16,810 Now, if I do that, 138 00:07:16,810 --> 00:07:18,803 I have a little border to the left. 139 00:07:20,340 --> 00:07:23,320 Now, because of padding-left, 140 00:07:23,320 --> 00:07:26,520 this looks good as there is some space 141 00:07:26,520 --> 00:07:28,400 between the border and the text 142 00:07:28,400 --> 00:07:30,370 but what's not looking good now 143 00:07:30,370 --> 00:07:35,200 is that the other elements are not on the same level. 144 00:07:35,200 --> 00:07:38,790 You can see this HTML text is a little bit more 145 00:07:38,790 --> 00:07:41,180 on the left than this one. 146 00:07:41,180 --> 00:07:42,280 And the reason for this 147 00:07:42,280 --> 00:07:44,250 is that here on this element, 148 00:07:44,250 --> 00:07:48,120 we got a border which takes up five pixels of width 149 00:07:48,120 --> 00:07:50,130 because that's the border width 150 00:07:50,130 --> 00:07:53,030 and here on this line, we don't have that. 151 00:07:53,030 --> 00:07:54,630 And, of course, we can inspect this 152 00:07:54,630 --> 00:07:56,350 to see that in the dev tools here 153 00:07:56,350 --> 00:07:58,520 with the box model. 154 00:07:58,520 --> 00:08:00,250 This second list item, 155 00:08:00,250 --> 00:08:03,550 which has no border has no border here. 156 00:08:03,550 --> 00:08:04,980 Surprise, surprise. 157 00:08:04,980 --> 00:08:07,027 The first list item, on the other hand, 158 00:08:07,027 --> 00:08:09,740 has that five-pixel border. 159 00:08:09,740 --> 00:08:14,400 To make sure that the text is indented identically, 160 00:08:14,400 --> 00:08:18,986 we cannot set border-left here on extra-important 161 00:08:18,986 --> 00:08:21,737 but instead, set it on the list items 162 00:08:21,737 --> 00:08:26,580 but cut that color and set it to transparent here 163 00:08:26,580 --> 00:08:27,593 as a default. 164 00:08:28,610 --> 00:08:32,380 So by default, all list items have a border to the left, 165 00:08:32,380 --> 00:08:36,100 which is five pixels thick but which is transparent. 166 00:08:36,100 --> 00:08:38,409 So not visible. 167 00:08:38,409 --> 00:08:41,070 And only the extra-important items, 168 00:08:41,070 --> 00:08:45,880 those items then also receive a different border-color 169 00:08:46,950 --> 00:08:51,950 of rgb 247, 209, 85. 170 00:08:52,190 --> 00:08:56,170 So here I'm not redefining the entire border-left again, 171 00:08:56,170 --> 00:08:58,480 though we could do that as well. 172 00:08:58,480 --> 00:09:00,030 But since it is a list item, 173 00:09:00,030 --> 00:09:02,560 which gets this extra-important class, 174 00:09:02,560 --> 00:09:05,920 we know that it already will have a border to the left, 175 00:09:05,920 --> 00:09:09,400 and I now just wanna change the color of that border. 176 00:09:09,400 --> 00:09:10,860 And that's what we can do 177 00:09:10,860 --> 00:09:15,083 with that border-color CSS property. 178 00:09:15,960 --> 00:09:18,510 Again, the alternative would have been 179 00:09:18,510 --> 00:09:22,660 to redefine the entire border-left again, 180 00:09:22,660 --> 00:09:24,683 just with a color this time. 181 00:09:25,580 --> 00:09:27,880 If I comment this out, that would lead 182 00:09:27,880 --> 00:09:29,420 to the same result 183 00:09:29,420 --> 00:09:30,820 but it's a bit redundant 184 00:09:30,820 --> 00:09:33,650 since we know that we already have a border 185 00:09:33,650 --> 00:09:35,640 and we just wanna change a color 186 00:09:35,640 --> 00:09:37,803 and hence, that's the way I'll do it here. 187 00:09:39,320 --> 00:09:40,500 And if I save this, 188 00:09:40,500 --> 00:09:44,110 now the text is on the same level again. 189 00:09:44,110 --> 00:09:45,370 So now we also have 190 00:09:45,370 --> 00:09:48,543 that important highlighting feature here. 191 00:09:49,600 --> 00:09:51,460 Now, speaking of highlighting, 192 00:09:51,460 --> 00:09:54,560 I also wanna highlight the word don't here 193 00:09:54,560 --> 00:09:57,380 in this sentence. 194 00:09:57,380 --> 00:10:00,453 And I wanna change that link styling. 195 00:10:01,290 --> 00:10:04,670 Let's start with highlighting don't here. 196 00:10:04,670 --> 00:10:08,020 To highlight a single word in a text, 197 00:10:08,020 --> 00:10:12,270 we need some way of selecting it with CSS. 198 00:10:12,270 --> 00:10:16,020 Otherwise we can only select the text as a whole. 199 00:10:16,020 --> 00:10:20,053 And that's where the special span element comes in. 200 00:10:21,100 --> 00:10:24,600 We can wrap the text, which we wanna highlight 201 00:10:24,600 --> 00:10:26,800 with the span element. 202 00:10:26,800 --> 00:10:29,780 And the special thing about the span element 203 00:10:29,780 --> 00:10:32,520 is that it has no semantic meaning. 204 00:10:32,520 --> 00:10:35,890 It doesn't change the semantics of that text. 205 00:10:35,890 --> 00:10:39,690 You can add it and it doesn't really change anything. 206 00:10:39,690 --> 00:10:42,610 The only reason why we have the span element 207 00:10:42,610 --> 00:10:46,123 is that we can now use it to change the styling. 208 00:10:47,250 --> 00:10:50,670 And therefore now we can select this span element here 209 00:10:50,670 --> 00:10:52,833 to change the styling of don't. 210 00:10:53,940 --> 00:10:57,630 Now, we can either use the span type selector 211 00:10:57,630 --> 00:11:00,870 but if we're using span in different parts of the page, 212 00:11:00,870 --> 00:11:05,740 maybe not all spans should get the same style 213 00:11:05,740 --> 00:11:08,720 and therefore, we might instead wanna use an id 214 00:11:08,720 --> 00:11:10,660 or a class here. 215 00:11:10,660 --> 00:11:12,450 And I'll again use a class 216 00:11:12,450 --> 00:11:15,052 and give it a class of highlight, 217 00:11:15,052 --> 00:11:19,440 and then target this class in the CSS code. 218 00:11:19,440 --> 00:11:22,090 Target highlight here 219 00:11:22,090 --> 00:11:25,590 and maybe just change the font-weight to 900 220 00:11:25,590 --> 00:11:27,143 or to bold here. 221 00:11:29,082 --> 00:11:31,723 And if I do that, you see now this is bold. 222 00:11:32,710 --> 00:11:35,720 So that's now this word being styled. 223 00:11:35,720 --> 00:11:38,390 Of course, you can also style it in other ways, 224 00:11:38,390 --> 00:11:41,860 for example, also change the color, underline it, 225 00:11:41,860 --> 00:11:43,640 whatever you wanna do. 226 00:11:43,640 --> 00:11:47,470 I'm fine with just this bold styling. 227 00:11:47,470 --> 00:11:50,650 Now, I will come back to that element a little bit later 228 00:11:50,650 --> 00:11:52,180 in this section though 229 00:11:52,180 --> 00:11:55,280 when we learn about a couple of new elements 230 00:11:55,280 --> 00:11:56,310 but for the moment, 231 00:11:56,310 --> 00:11:57,730 let's just keep it like this 232 00:11:57,730 --> 00:12:01,120 and let's move on to that link here. 233 00:12:01,120 --> 00:12:03,320 That link is very hard to read 234 00:12:03,320 --> 00:12:06,500 because it got some browser default styling here 235 00:12:06,500 --> 00:12:09,973 and that's definitely not the styling we wanna have. 236 00:12:11,120 --> 00:12:14,090 Therefore, to give that link our own styling, 237 00:12:14,090 --> 00:12:15,533 we need to select it. 238 00:12:16,570 --> 00:12:19,790 And for selecting it, there are different ways. 239 00:12:19,790 --> 00:12:23,060 We could give those links IDs or classes 240 00:12:23,060 --> 00:12:25,860 or if we know that we have the same styling 241 00:12:25,860 --> 00:12:28,800 for pretty much all links on the page, 242 00:12:28,800 --> 00:12:31,640 then we can also select by HTML tag. 243 00:12:31,640 --> 00:12:33,093 And that's what I'll do. 244 00:12:33,960 --> 00:12:36,950 Now I like to keep my CSS code organized, 245 00:12:36,950 --> 00:12:39,690 such that I start with the tag selectors 246 00:12:39,690 --> 00:12:42,450 and then I have class selectors thereafter. 247 00:12:42,450 --> 00:12:46,290 And hence, I'll insert that anchor tag selector here 248 00:12:46,290 --> 00:12:48,030 after the list item. 249 00:12:48,030 --> 00:12:50,810 Though the order wouldn't matter here 250 00:12:50,810 --> 00:12:54,830 since I'm not using order to determine specificity here 251 00:12:54,830 --> 00:12:55,920 in my code. 252 00:12:55,920 --> 00:12:58,210 Nonetheless, I'll add my anchor tag there. 253 00:12:58,210 --> 00:13:00,223 My anchor tag selector. 254 00:13:01,390 --> 00:13:03,130 And now I, first of all, 255 00:13:03,130 --> 00:13:06,570 wanna get rid of the underlining with text-decoration: none 256 00:13:08,072 --> 00:13:10,500 and I wanna set my own color. 257 00:13:10,500 --> 00:13:13,330 Now, I'll actually keep a purple color 258 00:13:13,330 --> 00:13:17,870 because I'll also give this anchor tag a background color. 259 00:13:17,870 --> 00:13:21,873 So here I'll set this to a purpose color of rgb 36, 3, 102. 260 00:13:26,100 --> 00:13:31,100 But also give it a background-color of rgb 255, 237, 177. 261 00:13:35,410 --> 00:13:38,140 And that should be rgb nor rbg. 262 00:13:39,810 --> 00:13:41,210 So for now I'll save that. 263 00:13:41,210 --> 00:13:43,240 That's the style we got. 264 00:13:43,240 --> 00:13:45,770 Now, some internal spacing would be nice 265 00:13:45,770 --> 00:13:48,080 if that background color 266 00:13:48,080 --> 00:13:52,250 would not sit directly on the edges of the text. 267 00:13:52,250 --> 00:13:53,822 And therefore, we can add some padding 268 00:13:53,822 --> 00:13:57,660 because inline elements also use the box model. 269 00:13:57,660 --> 00:14:00,190 There are some differences regarding top 270 00:14:00,190 --> 00:14:02,320 and bottom margin, but other than that, 271 00:14:02,320 --> 00:14:06,440 it's the same as the box model in general. 272 00:14:06,440 --> 00:14:07,540 And therefore on that link, 273 00:14:07,540 --> 00:14:09,110 we can add some padding, 274 00:14:09,110 --> 00:14:12,720 and I will only add a little bit of padding top and bottom 275 00:14:12,720 --> 00:14:15,650 but add more padding left and right. 276 00:14:15,650 --> 00:14:18,153 Two pixels and six pixels should be good. 277 00:14:19,170 --> 00:14:21,680 I also wanna add rounded corners 278 00:14:21,680 --> 00:14:25,373 with border-radius: four pixels maybe. 279 00:14:27,160 --> 00:14:29,453 If we save that, that's the look we got. 280 00:14:30,780 --> 00:14:34,920 Now, for links, we also often wanna have different styles 281 00:14:34,920 --> 00:14:36,763 if we hover over them. 282 00:14:37,710 --> 00:14:39,610 And you learned that you can achieve this 283 00:14:39,610 --> 00:14:42,150 with those pseudo selectors, 284 00:14:42,150 --> 00:14:44,380 which exist to, for example, 285 00:14:44,380 --> 00:14:47,643 select different states of elements. 286 00:14:48,700 --> 00:14:52,200 And we can use the hover pseudo selector 287 00:14:52,200 --> 00:14:57,200 by adding :hover after this tag type selector here. 288 00:14:57,350 --> 00:15:00,600 So after the a selector with :hover, 289 00:15:00,600 --> 00:15:02,973 I select the hover state here. 290 00:15:04,380 --> 00:15:09,070 And I actually also wanna select the active state, 291 00:15:09,070 --> 00:15:12,840 which is when we touch this on a mobile device 292 00:15:12,840 --> 00:15:16,020 or click on it and hold it clicked, 293 00:15:16,020 --> 00:15:21,020 and therefore, we also have the active pseudo selector. 294 00:15:21,810 --> 00:15:23,860 And since I wanna apply the same styles 295 00:15:23,860 --> 00:15:27,800 to both selector, we can use the group combinator 296 00:15:27,800 --> 00:15:30,400 to add a comma after the first selector 297 00:15:30,400 --> 00:15:32,700 and then add our second selector 298 00:15:32,700 --> 00:15:36,310 so that the styles defined between those curly braces 299 00:15:36,310 --> 00:15:39,660 will apply to both selectors. 300 00:15:39,660 --> 00:15:43,270 And that's not just available for pseudo selectors 301 00:15:43,270 --> 00:15:46,450 but for all CSS selectors. 302 00:15:46,450 --> 00:15:49,500 If you've got the same styles for different selectors, 303 00:15:49,500 --> 00:15:52,160 you can group those selectors together 304 00:15:52,160 --> 00:15:54,580 by separating them with a comma 305 00:15:54,580 --> 00:15:57,330 in front of those curly braces then. 306 00:15:57,330 --> 00:16:00,440 This comma-separated selector list. 307 00:16:00,440 --> 00:16:04,360 So here I'll actually wrap this across multiple lines 308 00:16:04,360 --> 00:16:07,020 or the auto format shortcut did that for me, 309 00:16:07,020 --> 00:16:11,690 and now we can define the hover and active styles. 310 00:16:11,690 --> 00:16:13,080 And the only thing I wanna do here 311 00:16:13,080 --> 00:16:15,500 is change the background-color a little bit. 312 00:16:15,500 --> 00:16:20,497 I'll change it to rgb 250, 201, 39. 313 00:16:22,500 --> 00:16:25,210 With that, now if I hover over this, 314 00:16:25,210 --> 00:16:27,970 it clearly gets highlighted. 315 00:16:27,970 --> 00:16:30,853 And that's now the finished link styling. 316 00:16:31,860 --> 00:16:34,680 And that overall is the finished styling 317 00:16:34,680 --> 00:16:37,773 for this main content here. 318 00:16:38,620 --> 00:16:41,990 Hence the only remaining thing which I now wanna add 319 00:16:41,990 --> 00:16:44,500 is my footer at the bottom, 320 00:16:44,500 --> 00:16:47,940 which has another link, which looks like a button, 321 00:16:47,940 --> 00:16:50,970 and which also has this copyright text. 322 00:16:50,970 --> 00:16:52,900 And that's what we're going to add 323 00:16:52,900 --> 00:16:55,653 and style over the next minutes.