1 00:00:02,160 --> 00:00:04,500 So let's finish that page content, 2 00:00:04,500 --> 00:00:06,760 by adding the footer content. 3 00:00:06,760 --> 00:00:09,540 And for this in the index HTML file, 4 00:00:09,540 --> 00:00:13,170 I'll scroll here, to my footer, 5 00:00:13,170 --> 00:00:15,240 and now in that footer, 6 00:00:15,240 --> 00:00:18,050 I want to have two pieces of content. 7 00:00:18,050 --> 00:00:22,260 I want to have another anchor tag, another link, 8 00:00:22,260 --> 00:00:24,040 which will look like a button, 9 00:00:24,040 --> 00:00:26,870 but which technically will still be a link, 10 00:00:26,870 --> 00:00:30,690 and I'll have a paragraph with some text. 11 00:00:30,690 --> 00:00:34,550 And the text here is simply, a little copyright symbol, 12 00:00:34,550 --> 00:00:36,880 and then my company name, of course, 13 00:00:36,880 --> 00:00:39,070 you can plug your name in there, 14 00:00:39,070 --> 00:00:41,253 because you created your page. 15 00:00:42,090 --> 00:00:47,090 Now, for the link, the text will be "Download PDF summary". 16 00:00:47,230 --> 00:00:48,610 And that is now a link, 17 00:00:48,610 --> 00:00:51,760 which we haven't created like this before, 18 00:00:51,760 --> 00:00:54,680 but which you maybe were able to figure out, 19 00:00:54,680 --> 00:00:58,240 if not, it's no problem, but you can add links, 20 00:00:58,240 --> 00:01:01,770 which don't just point at other pages, 21 00:01:01,770 --> 00:01:05,610 but you can also instead, point at a file, 22 00:01:05,610 --> 00:01:07,810 which lives in your project folder 23 00:01:07,810 --> 00:01:12,650 or in general point at a URL that loads a file 24 00:01:12,650 --> 00:01:14,633 instead of an HTML page. 25 00:01:15,520 --> 00:01:18,810 And here, I want to point that this PDF document, 26 00:01:18,810 --> 00:01:21,650 so the "href" attribute just takes this, 27 00:01:21,650 --> 00:01:26,650 PDF document file name, including the extension as a value, 28 00:01:26,860 --> 00:01:29,720 and that now points at this PDF file 29 00:01:29,720 --> 00:01:32,550 instead of a HTML file. 30 00:01:32,550 --> 00:01:36,820 And that is perfectly fine, you can point at anything 31 00:01:36,820 --> 00:01:39,950 and a link to that file will be created. 32 00:01:39,950 --> 00:01:43,030 And if you point at a HTML file 33 00:01:43,030 --> 00:01:46,770 or a page that loads a HTML file, ultimately, 34 00:01:46,770 --> 00:01:48,720 the browser will navigate there 35 00:01:48,720 --> 00:01:50,920 and display that page. 36 00:01:50,920 --> 00:01:54,650 If you point at some other file, like a PDF file, 37 00:01:54,650 --> 00:01:58,480 then the browser will simply download that file, 38 00:01:58,480 --> 00:02:03,480 for you open the download window, or if it's able, 39 00:02:03,540 --> 00:02:06,440 just preview that file in the browser. 40 00:02:06,440 --> 00:02:08,940 And for PDF files, it turns out that, 41 00:02:08,940 --> 00:02:11,756 modern browsers typically can preview this, 42 00:02:11,756 --> 00:02:14,810 so if we save this and we go back, 43 00:02:14,810 --> 00:02:17,770 if I click on download PDF summary, 44 00:02:17,770 --> 00:02:22,753 that file is opened and previewed in that browser here. 45 00:02:23,820 --> 00:02:28,270 So that's how we can construct such a link to a file here. 46 00:02:28,270 --> 00:02:32,730 Now, here's one new thing, which we haven't used before. 47 00:02:32,730 --> 00:02:37,730 If I want to create a link that actually is opened in a new, 48 00:02:38,220 --> 00:02:40,650 browser window, in a new tab, 49 00:02:40,650 --> 00:02:44,820 then we can tell the browser to open that link in a new tab, 50 00:02:44,820 --> 00:02:48,080 by also adding the target attribute. 51 00:02:48,080 --> 00:02:52,560 And, the default value here is underscore self, 52 00:02:52,560 --> 00:02:55,343 which would instruct a browser to open that, 53 00:02:56,750 --> 00:03:00,130 file in the existing tab. 54 00:03:00,130 --> 00:03:03,380 And that's the default, so we don't need to set this, 55 00:03:03,380 --> 00:03:06,650 but if we want to open the content in a new tab, 56 00:03:06,650 --> 00:03:10,130 we set targets to underscore blank, 57 00:03:10,130 --> 00:03:13,560 and that will then open a new blank tab, 58 00:03:13,560 --> 00:03:16,490 into which that content is loaded. 59 00:03:16,490 --> 00:03:20,090 So, if I add this attribute here and save this, 60 00:03:20,090 --> 00:03:21,650 if I click on this link again, 61 00:03:21,650 --> 00:03:24,420 now you see the existing pages kept open 62 00:03:24,420 --> 00:03:29,090 and that document was opened in a new page, in a new tab. 63 00:03:29,090 --> 00:03:32,060 And that's a little addition, which is worth knowing, 64 00:03:32,060 --> 00:03:36,070 which is why I also wanted to show it here. 65 00:03:36,070 --> 00:03:39,390 Now with that, we got the content in place 66 00:03:39,390 --> 00:03:43,150 and I pressed this auto format shortcuts to format it, 67 00:03:43,150 --> 00:03:45,440 such that it's a bit more readable, 68 00:03:45,440 --> 00:03:49,730 but now I also want to style that content, of course. 69 00:03:49,730 --> 00:03:54,610 And for example, the footer content also should be centered, 70 00:03:54,610 --> 00:03:57,420 But in addition, I also want to style the link 71 00:03:57,420 --> 00:04:01,480 in there differently, and also change the text color, 72 00:04:01,480 --> 00:04:04,563 off this copyright text a little bit. 73 00:04:05,650 --> 00:04:07,980 And to achieve all of that, We need to go back, 74 00:04:07,980 --> 00:04:10,313 to the styles' CSS file. 75 00:04:11,500 --> 00:04:16,500 Here, I now will scroll up to my type selectors here 76 00:04:16,550 --> 00:04:21,390 and also target the footer tag like this. 77 00:04:21,390 --> 00:04:25,860 Now to align the content we can use "text-align center", 78 00:04:25,860 --> 00:04:29,520 text-align center instead of margin auto, 79 00:04:29,520 --> 00:04:32,610 because it's text content, which I want to center, 80 00:04:32,610 --> 00:04:37,610 I want to center this link text and this paragraph text. 81 00:04:37,950 --> 00:04:41,740 So, I'm not interested in centering the footer overall. 82 00:04:41,740 --> 00:04:45,770 I don't care about that, I just want to center the content, 83 00:04:45,770 --> 00:04:49,210 of the footer, and since that is all inline content, 84 00:04:49,210 --> 00:04:52,750 I can work with text-align center. 85 00:04:52,750 --> 00:04:56,260 Now I also want to target the paragraph in there 86 00:04:56,260 --> 00:04:58,910 and change the text color of the paragraph, 87 00:04:58,910 --> 00:05:02,593 And actually also add a little bit of margin to the top. 88 00:05:03,650 --> 00:05:07,130 Now for this icon to use the piece selector like this, 89 00:05:07,130 --> 00:05:11,090 because that would select all paragraphs on the page, 90 00:05:11,090 --> 00:05:15,520 and I only want to select the paragraph here in the footer. 91 00:05:15,520 --> 00:05:18,680 And therefore, we can again use the Combinator, 92 00:05:18,680 --> 00:05:20,540 We saw an action before, 93 00:05:20,540 --> 00:05:25,060 where I write "footer white space p", 94 00:05:25,060 --> 00:05:29,310 to select all P elements inside of footer elements 95 00:05:29,310 --> 00:05:33,293 and only style those, with the styles I'm defining here. 96 00:05:34,450 --> 00:05:38,680 And then here I can set a text color with the color property 97 00:05:38,680 --> 00:05:41,100 and I'll set it to RGB, 131, 113, 149, 98 00:05:44,320 --> 00:05:46,700 which is one of the colors I came up with, 99 00:05:46,700 --> 00:05:50,700 as always, you can of course use your colors 100 00:05:50,700 --> 00:05:55,530 and I'll set margin top to 30 pixels. 101 00:05:55,530 --> 00:05:58,420 And here I'm only targeting the top margin 102 00:05:58,420 --> 00:06:00,530 because since it will be centered, 103 00:06:00,530 --> 00:06:04,160 I'm not caring about left and right margin anyways, 104 00:06:04,160 --> 00:06:07,840 and since there won't be any content below this paragraph, 105 00:06:07,840 --> 00:06:10,960 I also don't care about bottom margin. 106 00:06:10,960 --> 00:06:14,300 I only want to have more distance to that link. 107 00:06:14,300 --> 00:06:17,513 So the top margin is the only thing I want to set here. 108 00:06:18,830 --> 00:06:21,600 With that if that's all saved, it's centered, 109 00:06:21,600 --> 00:06:24,740 we have that changed color, and we have more spacing, 110 00:06:24,740 --> 00:06:27,050 between the link and the text. 111 00:06:27,050 --> 00:06:29,670 Now, if you want to be able to see this a bit better, 112 00:06:29,670 --> 00:06:32,500 if you want to have more room to scroll down, 113 00:06:32,500 --> 00:06:36,900 you can, of course, also give this a margin to the bottom, 114 00:06:36,900 --> 00:06:40,360 or give the overall footer a margin to the bottom, 115 00:06:40,360 --> 00:06:44,060 doesn't really matter here of 100 pixels maybe, 116 00:06:44,060 --> 00:06:46,850 and by doing that, I can scroll down a bit further, 117 00:06:46,850 --> 00:06:49,670 these extra 100 pixels. 118 00:06:49,670 --> 00:06:52,070 Okay, so now we got that. 119 00:06:52,070 --> 00:06:54,490 Now, let's work on the link styling, 120 00:06:54,490 --> 00:06:56,900 and I want to style this link such that, 121 00:06:56,900 --> 00:06:59,033 it looks a bit more like a button, 122 00:07:00,981 --> 00:07:03,070 but I'm not using any other HTML element here, 123 00:07:03,070 --> 00:07:04,810 I will use the anchor element, 124 00:07:04,810 --> 00:07:07,371 I just want to change the styles. 125 00:07:07,371 --> 00:07:10,210 And I only want to select this link, 126 00:07:10,210 --> 00:07:13,590 to look like a button, not the other links. 127 00:07:13,590 --> 00:07:16,590 Therefore, I only want to select this link in the footer, 128 00:07:16,590 --> 00:07:19,390 and now we got different options here. 129 00:07:19,390 --> 00:07:23,060 I can of course now use "footer a", 130 00:07:23,060 --> 00:07:25,140 to select only links in the footer, 131 00:07:25,140 --> 00:07:28,263 and that would work here and it would be perfectly fine. 132 00:07:29,570 --> 00:07:34,330 I could also give this anchor tag a class of "BTN" maybe, 133 00:07:34,330 --> 00:07:36,150 or button, whatever you want, 134 00:07:36,150 --> 00:07:39,100 and then give this class a certain look. 135 00:07:39,100 --> 00:07:43,823 This could be useful if we have more links or more elements, 136 00:07:43,823 --> 00:07:48,490 on this page that should share one of the same style. 137 00:07:48,490 --> 00:07:49,910 It's not the case here, 138 00:07:49,910 --> 00:07:52,050 but it would not be unrealistic, 139 00:07:52,050 --> 00:07:53,700 that you are building a webpage, 140 00:07:53,700 --> 00:07:56,960 which has multiple links that should look like buttons, 141 00:07:56,960 --> 00:07:59,903 and then such a class here could be useful. 142 00:08:01,120 --> 00:08:02,460 Since it's here, however, 143 00:08:02,460 --> 00:08:04,520 the only link that should look like this, 144 00:08:04,520 --> 00:08:09,050 we could also give it an "ID" and, select this. 145 00:08:09,050 --> 00:08:12,650 And all those options would be fine and viable, 146 00:08:12,650 --> 00:08:14,770 as so often in web development, 147 00:08:14,770 --> 00:08:18,820 you will have more than one way of solving a certain problem 148 00:08:18,820 --> 00:08:21,469 and achieving a certain look. 149 00:08:21,469 --> 00:08:26,440 Here, I will however, simply select with footer a, 150 00:08:26,440 --> 00:08:30,610 so with this Combinator to select all links in a footer, 151 00:08:30,610 --> 00:08:33,200 since that's the only footer and the only link, 152 00:08:33,200 --> 00:08:36,620 I have in there that will only select that link, 153 00:08:36,620 --> 00:08:38,630 and therefore, I will use that here, 154 00:08:38,630 --> 00:08:42,690 and then I'll write my styles for that link here. 155 00:08:42,690 --> 00:08:45,240 And now to achieve this button look, 156 00:08:45,240 --> 00:08:50,240 I'll just set some padding here of 12 pixels and 20 pixels, 157 00:08:50,950 --> 00:08:55,950 so 12 pixels top and bottom, 20 pixels left and right, 158 00:08:56,390 --> 00:09:01,390 and then, give it a border radius of 8 pixels maybe, 159 00:09:01,700 --> 00:09:02,600 and then some, 160 00:09:04,460 --> 00:09:09,460 background color of RGB, 250, 201, 39, 161 00:09:13,900 --> 00:09:18,480 and a text color of RGB, 66, 51, 4. 162 00:09:21,772 --> 00:09:26,230 And of course, feel free to experiment with those styles, 163 00:09:26,230 --> 00:09:30,040 use different values, or style more things, 164 00:09:30,040 --> 00:09:33,550 it's your code, so definitely play around with it 165 00:09:33,550 --> 00:09:35,610 and experiment, 166 00:09:35,610 --> 00:09:38,720 that is just a styling I will use here. 167 00:09:38,720 --> 00:09:41,590 Now, I also want to have certain extra styles, 168 00:09:41,590 --> 00:09:44,410 which are applied when we're hovering over it 169 00:09:44,410 --> 00:09:47,800 or when it's active, so when we keep it pressed 170 00:09:47,800 --> 00:09:49,560 and therefore I'll add another rule, 171 00:09:49,560 --> 00:09:52,060 where I select anchor elements in a footer, 172 00:09:52,060 --> 00:09:56,280 which are hovered with help of the Hover Pseudo Selector, 173 00:09:56,280 --> 00:09:58,660 or anchor elements in a footer, 174 00:09:58,660 --> 00:10:02,393 which are active with the Active Pseudo Selector. 175 00:10:03,490 --> 00:10:05,800 And here, I just want to change the background color 176 00:10:05,800 --> 00:10:09,663 and change it to RGB 255, 186, 58. 177 00:10:14,410 --> 00:10:16,750 With all that, if we saved this, 178 00:10:16,750 --> 00:10:20,913 now I got this button look and this hover effect here. 179 00:10:22,260 --> 00:10:24,310 And if we inspect this button, 180 00:10:24,310 --> 00:10:28,860 we also again see inheritance and specificity in action, 181 00:10:28,860 --> 00:10:33,120 so just to refresh this again, I will show it again here, 182 00:10:33,120 --> 00:10:36,863 this anchor tag and the footer actually is affected 183 00:10:36,863 --> 00:10:39,560 by the browser default styles, 184 00:10:39,560 --> 00:10:42,160 Well, first of all, it's affected by the body, 185 00:10:42,160 --> 00:10:45,000 from which it inherits the font-family, for example, 186 00:10:45,000 --> 00:10:47,180 then it's affected by the footer, 187 00:10:47,180 --> 00:10:50,510 from which it gets the center, text alignment. 188 00:10:50,510 --> 00:10:52,720 Margin bottom and background color, 189 00:10:52,720 --> 00:10:55,480 are not inheritable properties, 190 00:10:55,480 --> 00:10:57,970 so they aren't inherited. 191 00:10:57,970 --> 00:11:00,440 Then we got the browser default styles, 192 00:11:00,440 --> 00:11:04,300 which except for cursor pointer are all not applied, 193 00:11:04,300 --> 00:11:06,020 because we overwrote them, 194 00:11:06,020 --> 00:11:09,160 because we have our own anchor text selector, 195 00:11:09,160 --> 00:11:11,440 where we overwrite text decoration 196 00:11:11,440 --> 00:11:13,880 and then set a color background, color padding 197 00:11:13,880 --> 00:11:15,890 and border radius. 198 00:11:15,890 --> 00:11:20,210 And that's this, anchor selector, which we defined up here. 199 00:11:20,210 --> 00:11:21,810 That's the anchor selector, 200 00:11:21,810 --> 00:11:24,840 which is responsible for the styles of these other, 201 00:11:24,840 --> 00:11:26,370 anchor elements. 202 00:11:26,370 --> 00:11:29,230 Here, this button and element in the footer, 203 00:11:29,230 --> 00:11:31,100 should have a very different style, 204 00:11:31,100 --> 00:11:34,090 So we added another, CSS rule, 205 00:11:34,090 --> 00:11:38,010 which overwrites most of those properties, 206 00:11:38,010 --> 00:11:40,450 from the default anchor tag rule, 207 00:11:40,450 --> 00:11:42,863 because of higher specificity. 208 00:11:43,760 --> 00:11:47,500 Footer a has higher specificity, for example, 209 00:11:47,500 --> 00:11:52,500 for the color, because footer a is more specific, 210 00:11:53,030 --> 00:11:56,300 because selecting anchor tags, which are in a footer, 211 00:11:56,300 --> 00:12:00,090 is a more specific way of selecting things than just, 212 00:12:00,090 --> 00:12:01,990 all anchor tags. 213 00:12:01,990 --> 00:12:04,690 If I say, "The guy in the blue shirt", 214 00:12:04,690 --> 00:12:06,707 it's more specific than saying, 215 00:12:06,707 --> 00:12:10,220 "The guy over there" or "All guys", 216 00:12:10,220 --> 00:12:14,420 I'm targeting a specific guy by the color of his shirt, 217 00:12:14,420 --> 00:12:16,770 so that's the idea of specificity here, 218 00:12:16,770 --> 00:12:20,170 and hence, we now got this specific button look here, 219 00:12:20,170 --> 00:12:22,570 on this footer anchor tag. 220 00:12:22,570 --> 00:12:24,510 And that's just again, a refresher, 221 00:12:24,510 --> 00:12:26,060 which I wanted to add here, 222 00:12:26,060 --> 00:12:30,260 to make these concepts off inheritance and specificity, 223 00:12:30,260 --> 00:12:32,480 super clear. 224 00:12:32,480 --> 00:12:35,960 And therefore now, all the styles are done, 225 00:12:35,960 --> 00:12:39,140 that's the final look of this page, which I want to have, 226 00:12:39,140 --> 00:12:42,350 That's the final look I showed you at the beginning, 227 00:12:42,350 --> 00:12:46,670 but, that's not the final state of this project. 228 00:12:46,670 --> 00:12:50,170 Instead, now I want to introduce a few selected 229 00:12:50,170 --> 00:12:54,663 special HTML elements, and when you might want to use them.