1 00:00:02,190 --> 00:00:04,500 Now that we completed this exercise 2 00:00:04,500 --> 00:00:06,400 and built the second page, 3 00:00:06,400 --> 00:00:08,740 if we take a closer look at our code, 4 00:00:08,740 --> 00:00:11,151 then of course it's fairly easy to see 5 00:00:11,151 --> 00:00:14,470 that the full week CSS file has a lot 6 00:00:14,470 --> 00:00:18,030 in common with the daily challenge CSS file. 7 00:00:18,030 --> 00:00:20,170 There are some extra styles in 8 00:00:20,170 --> 00:00:21,911 the daily challenge CSS file, 9 00:00:21,911 --> 00:00:25,060 but there also are a lot of similarities. 10 00:00:25,060 --> 00:00:27,122 And just as we, for example, reduced 11 00:00:27,122 --> 00:00:30,939 code duplication by moving the color to body, 12 00:00:30,939 --> 00:00:34,690 instead of having it on individual elements, 13 00:00:34,690 --> 00:00:38,410 we can also reduce the overall amount of CSS code 14 00:00:38,410 --> 00:00:41,240 by creating a shared CSS file, 15 00:00:41,240 --> 00:00:43,840 which is used by both HTML files 16 00:00:43,840 --> 00:00:46,477 and then just file specific files, 17 00:00:46,477 --> 00:00:48,800 which can add more styles which 18 00:00:48,800 --> 00:00:52,030 might not be needed on other pages. 19 00:00:52,030 --> 00:00:53,700 And that's what I'll do here. 20 00:00:53,700 --> 00:00:56,850 I'll add a third CSS file and I'll name it 21 00:00:56,850 --> 00:01:01,630 shared CSS, the name is up to you though. 22 00:01:01,630 --> 00:01:06,370 The goal is to move all the shared CSS code into that file. 23 00:01:06,370 --> 00:01:07,650 So for this, we can, for example, 24 00:01:07,650 --> 00:01:09,630 take all the code in full week 25 00:01:09,630 --> 00:01:13,170 CSS and move it into shared CSS. 26 00:01:13,170 --> 00:01:15,650 And now let's see if there is something in here 27 00:01:15,650 --> 00:01:18,733 which shouldn't affect the first page. 28 00:01:20,720 --> 00:01:24,040 We definitely want to have our body styles here, 29 00:01:24,040 --> 00:01:27,550 we want to have more body styles in the first page, 30 00:01:27,550 --> 00:01:31,010 but we can add more in a separate CSS file. 31 00:01:31,010 --> 00:01:32,900 So having this shared styling 32 00:01:32,900 --> 00:01:34,613 here definitely makes sense. 33 00:01:35,520 --> 00:01:38,630 I want to have these H1 and paragraph styles 34 00:01:38,630 --> 00:01:41,410 here in the first page, and I'm also 35 00:01:41,410 --> 00:01:43,563 fine with those link styles here. 36 00:01:44,480 --> 00:01:46,440 Therefore, we can actually remove 37 00:01:46,440 --> 00:01:48,960 all the code in full week CSS. 38 00:01:48,960 --> 00:01:50,520 We could also delete that file, 39 00:01:50,520 --> 00:01:52,370 but I'll keep it around since we will 40 00:01:52,370 --> 00:01:55,400 use it later again in the next course module. 41 00:01:55,400 --> 00:01:59,480 So keep it around and then full week HTML. 42 00:01:59,480 --> 00:02:02,470 We can now add a second link in front of 43 00:02:02,470 --> 00:02:05,017 the full week CSS file link, 44 00:02:05,017 --> 00:02:09,243 where we import shared CSS as a style sheet. 45 00:02:10,539 --> 00:02:13,574 Now why in front of full week CSS, 46 00:02:13,574 --> 00:02:16,395 because the order will matter if we start 47 00:02:16,395 --> 00:02:19,310 overriding some of these shared styles. 48 00:02:19,310 --> 00:02:21,360 If we want to add more styles, 49 00:02:21,360 --> 00:02:24,110 then this one has to be imported first 50 00:02:24,110 --> 00:02:26,330 so that the second file can override 51 00:02:26,330 --> 00:02:28,950 some of those styles if needed. 52 00:02:28,950 --> 00:02:30,310 At the moment it's not needed, 53 00:02:30,310 --> 00:02:34,130 but still importing shared files first and more specific 54 00:02:34,130 --> 00:02:36,943 files there after is a good practice. 55 00:02:38,050 --> 00:02:40,300 Now I'll copy that link and also 56 00:02:40,300 --> 00:02:42,890 add it on index HTML, in front of 57 00:02:42,890 --> 00:02:45,303 this daily challenge CSS link. 58 00:02:46,840 --> 00:02:49,540 And now we can remove unnecessary code 59 00:02:49,540 --> 00:02:51,800 from daily challenge. 60 00:02:51,800 --> 00:02:54,130 From body, I removed the background color 61 00:02:54,130 --> 00:02:56,960 and text alignment and the text color, 62 00:02:56,960 --> 00:02:58,870 but I'll keep the margin. 63 00:02:58,870 --> 00:03:01,513 And the beautiful thing about CSS is 64 00:03:01,513 --> 00:03:05,910 that now the body here from daily challenge 65 00:03:05,910 --> 00:03:09,780 will overwrite the body from shared CSS, 66 00:03:09,780 --> 00:03:14,101 but only if we have clashes in CSS properties. 67 00:03:14,101 --> 00:03:17,010 That's not the case here, and in that case, 68 00:03:17,010 --> 00:03:18,770 it will be merged in stat. 69 00:03:18,770 --> 00:03:21,751 So the margin will simply be added to those 70 00:03:21,751 --> 00:03:26,310 base styles which we have in the shared CSS file. 71 00:03:26,310 --> 00:03:28,850 So now this margin from daily challenge 72 00:03:28,850 --> 00:03:32,026 CSS will be applied to the body in addition 73 00:03:32,026 --> 00:03:36,307 to those base styles defined in shared CSS. 74 00:03:38,130 --> 00:03:39,570 Now I want to keep the image here 75 00:03:39,570 --> 00:03:43,160 because that's exclusive to this first page. 76 00:03:43,160 --> 00:03:46,690 We can get rid of H1 and P, because we have data 77 00:03:46,690 --> 00:03:48,913 in their shared CSS file already. 78 00:03:49,835 --> 00:03:53,610 For the link, I want to get rid of that as well, 79 00:03:53,610 --> 00:03:56,210 because we have everything we need here 80 00:03:56,210 --> 00:03:58,680 in the shared CSS file as well. 81 00:03:58,680 --> 00:04:02,490 And I want to keep my today's challenge ID selector here, 82 00:04:02,490 --> 00:04:04,993 because that's specific for this page. 83 00:04:06,070 --> 00:04:08,160 And with that, if we save this and reload 84 00:04:08,160 --> 00:04:11,264 this first page, it looks the same as before. 85 00:04:11,264 --> 00:04:14,350 The same is true for the second page, but now 86 00:04:14,350 --> 00:04:19,339 we share some common CSS code across pages. 87 00:04:19,339 --> 00:04:21,480 And that's a very common thing to do, 88 00:04:21,480 --> 00:04:23,930 because whichever website you are building, 89 00:04:23,930 --> 00:04:27,450 the chance is very high, that the different pages 90 00:04:27,450 --> 00:04:31,860 that make up your website will have some shared styles. 91 00:04:31,860 --> 00:04:34,500 And using such a shared CSS file has done 92 00:04:34,500 --> 00:04:37,400 a nice way of only defining and working 93 00:04:37,400 --> 00:04:39,710 on those styles in one place, 94 00:04:39,710 --> 00:04:42,533 and still using them in multiple pages.