1 1 00:00:00,170 --> 00:00:01,530 Hi guys and welcome back. 2 2 00:00:01,530 --> 00:00:02,363 In this video, 3 3 00:00:02,363 --> 00:00:04,740 let's take a look at how we can link our CSS files 4 4 00:00:04,740 --> 00:00:06,180 with our HTML files, 5 5 00:00:06,180 --> 00:00:09,200 and also add how we can verify that that's working 6 6 00:00:09,200 --> 00:00:11,260 using our developer tools. 7 7 00:00:11,260 --> 00:00:12,900 Let's get started. 8 8 00:00:12,900 --> 00:00:15,990 Here, I've got a visual studio code project, 9 9 00:00:15,990 --> 00:00:19,380 which has an index.html file inside it, 10 10 00:00:19,380 --> 00:00:22,310 and I've opened that file in my browser. 11 11 00:00:22,310 --> 00:00:24,280 And again, just to recap how to do that, 12 12 00:00:24,280 --> 00:00:25,910 all I've done is right click, 13 13 00:00:25,910 --> 00:00:29,170 copy the path and then paste it in the address bar. 14 14 00:00:29,170 --> 00:00:31,360 That's gonna load the HTML. 15 15 00:00:31,360 --> 00:00:36,360 This HTML file doesn't have any CSS linked in the head, 16 16 00:00:36,670 --> 00:00:39,470 so at the moment there's no CSS file be linked, 17 17 00:00:39,470 --> 00:00:41,480 no CSS file even exists. 18 18 00:00:41,480 --> 00:00:43,350 But let's say that we want to create one, 19 19 00:00:43,350 --> 00:00:45,920 so I'm going to bring the Explorer here, 20 20 00:00:45,920 --> 00:00:49,390 I'm gonna create something like main.css, 21 21 00:00:49,390 --> 00:00:51,600 you can call your CSS file whatever you want, 22 22 00:00:51,600 --> 00:00:54,550 and in here, we're gonna put some style changes 23 23 00:00:54,550 --> 00:00:55,640 for our page. 24 24 00:00:55,640 --> 00:00:57,530 So I'm gonna start with the H1, 25 25 00:00:57,530 --> 00:00:59,030 which is gonna modify my title, 26 26 00:00:59,030 --> 00:01:02,010 we're gonna change it to blue, for example, 27 27 00:01:02,010 --> 00:01:05,320 we can add some margins at the bottom, 28 28 00:01:05,320 --> 00:01:08,340 we can add some font size change. 29 29 00:01:08,340 --> 00:01:09,960 Let's see. 30 30 00:01:09,960 --> 00:01:12,310 Okay, so we've got this in here, 31 31 00:01:12,310 --> 00:01:14,820 I'll also add a small change to that paragraph 32 32 00:01:14,820 --> 00:01:15,653 that's in there, 33 33 00:01:15,653 --> 00:01:16,990 I'm gonna make it red. 34 34 00:01:16,990 --> 00:01:19,240 So there we have it, our CSS file 35 35 00:01:19,240 --> 00:01:20,880 and we've got our HTML file. 36 36 00:01:20,880 --> 00:01:23,010 So I'm gonna close the sidebar again, 37 37 00:01:23,010 --> 00:01:24,850 just so we get a bit more room, 38 38 00:01:24,850 --> 00:01:27,410 now you can see that if I'll refresh the page, 39 39 00:01:27,410 --> 00:01:29,690 nothing changes, colour or size, 40 40 00:01:29,690 --> 00:01:32,270 obviously because we haven't linked the CSS file 41 41 00:01:32,270 --> 00:01:34,760 together with our HTML. 42 42 00:01:34,760 --> 00:01:36,840 However, it's important to note 43 43 00:01:36,840 --> 00:01:40,860 that this page is not completely un-styled. 44 44 00:01:40,860 --> 00:01:41,960 To show you what I mean by that, 45 45 00:01:41,960 --> 00:01:43,580 let me go into the developer tools, 46 46 00:01:43,580 --> 00:01:44,413 and in order to do that, 47 47 00:01:44,413 --> 00:01:47,260 I'm going to just make this a bit bigger, 48 48 00:01:47,260 --> 00:01:48,880 which is gonna make my editor a bit smaller, 49 49 00:01:48,880 --> 00:01:49,960 but bare with me for a moment. 50 50 00:01:49,960 --> 00:01:53,000 So I'm gonna right click on the title and click Inspect. 51 51 00:01:53,000 --> 00:01:56,720 You can see that if we select the title tag here, 52 52 00:01:56,720 --> 00:01:59,920 we get the style viewer on the left. 53 53 00:01:59,920 --> 00:02:01,640 At the moment, this style viewer 54 54 00:02:01,640 --> 00:02:04,040 is only displaying the style here, 55 55 00:02:04,040 --> 00:02:06,710 that comes from my user agent style sheet. 56 56 00:02:06,710 --> 00:02:09,900 That is my browser's default styles. 57 57 00:02:09,900 --> 00:02:12,790 So you can see that my browser has applied some styles 58 58 00:02:12,790 --> 00:02:14,130 to this title, 59 59 00:02:14,130 --> 00:02:17,330 and therefore, this title is not being shown 60 60 00:02:17,330 --> 00:02:18,910 as plain text. 61 61 00:02:18,910 --> 00:02:20,570 It is being shown in a slightly bigger 62 62 00:02:20,570 --> 00:02:23,540 font size, for example, and slightly bolder. 63 63 00:02:23,540 --> 00:02:25,080 Similarly, if we select the paragraph, 64 64 00:02:25,080 --> 00:02:28,260 we can see that it has some styles as well. 65 65 00:02:28,260 --> 00:02:30,750 Now let's link our style sheet in here. 66 66 00:02:30,750 --> 00:02:33,230 So in the head, anywhere inside the head, 67 67 00:02:33,230 --> 00:02:34,780 we're gonna put a link, 68 68 00:02:34,780 --> 00:02:37,970 it has a rel attribute which stands for relationship, 69 69 00:02:37,970 --> 00:02:39,470 and this is the type of relationship, 70 70 00:02:39,470 --> 00:02:40,820 which is a style sheet, 71 71 00:02:40,820 --> 00:02:43,460 and then a href or hypertext reference, 72 72 00:02:43,460 --> 00:02:45,850 which is the file that we're linking. 73 73 00:02:45,850 --> 00:02:46,960 This is a void element, 74 74 00:02:46,960 --> 00:02:48,770 so we put the forward slash ended 75 75 00:02:48,770 --> 00:02:50,980 before closing the tag. 76 76 00:02:50,980 --> 00:02:52,530 Now if we refresh this page, 77 77 00:02:52,530 --> 00:02:54,550 you'll see that things do change, 78 78 00:02:54,550 --> 00:02:56,800 the CSS styles are being applied, 79 79 00:02:56,800 --> 00:02:59,030 and we can click on the H1 for example, 80 80 00:02:59,030 --> 00:02:59,863 and you can see now 81 81 00:02:59,863 --> 00:03:02,630 there are two groups of styles. 82 82 00:03:02,630 --> 00:03:05,440 This is how to confirm that your CSS file is working. 83 83 00:03:05,440 --> 00:03:07,657 Obviously, check that these styles are being applied, 84 84 00:03:07,657 --> 00:03:10,340 and the thing looks like what you want it to look like, 85 85 00:03:10,340 --> 00:03:13,270 but then also check the main.css file here, 86 86 00:03:13,270 --> 00:03:14,760 which is the name of our CSS file, 87 87 00:03:14,760 --> 00:03:17,290 is appearing in the style viewer. 88 88 00:03:17,290 --> 00:03:19,620 Here we can see that the main CSS styles, 89 89 00:03:19,620 --> 00:03:21,230 starting on line one, 90 90 00:03:21,230 --> 00:03:23,500 are being applied to this element, 91 91 00:03:23,500 --> 00:03:25,490 and these are the three styles that we've got 92 92 00:03:25,490 --> 00:03:27,330 in our CSS file. 93 93 00:03:27,330 --> 00:03:28,290 As we fit in the path, 94 94 00:03:28,290 --> 00:03:29,620 we can turn them on and off 95 95 00:03:29,620 --> 00:03:31,800 as we want or we can even write more styles here 96 96 00:03:31,800 --> 00:03:32,720 if you want, 97 97 00:03:32,720 --> 00:03:34,900 please refer back to the developer tools lecture 98 98 00:03:34,900 --> 00:03:37,940 in section three for more information. 99 99 00:03:37,940 --> 00:03:39,930 Note that when we overwrite a style, 100 100 00:03:39,930 --> 00:03:43,100 the previous styles appear as a strike-through text. 101 101 00:03:43,100 --> 00:03:45,570 So here this font size is overwriting 102 102 00:03:45,570 --> 00:03:46,940 this font size there. 103 103 00:03:46,940 --> 00:03:48,470 If you untick the font size, 104 104 00:03:48,470 --> 00:03:50,510 then this one now becomes enabled. 105 105 00:03:50,510 --> 00:03:52,500 Also note that we don't have to put the HTML 106 106 00:03:52,500 --> 00:03:54,140 and CSS files in the same folder, 107 107 00:03:54,140 --> 00:03:56,750 if you have a styles folder, let's say, 108 108 00:03:56,750 --> 00:03:59,270 and you put your main file in there, 109 109 00:03:59,270 --> 00:04:01,330 naturally now when we refresh the page, 110 110 00:04:01,330 --> 00:04:03,960 we are no longer being linked to the CSS file, 111 111 00:04:03,960 --> 00:04:05,420 because it doesn't exist, 112 112 00:04:05,420 --> 00:04:07,190 so that will be a couple of things you'll notice. 113 113 00:04:07,190 --> 00:04:10,190 The first thing is the styles are no longer correct, 114 114 00:04:10,190 --> 00:04:12,870 the style block disappears from the style viewer, 115 115 00:04:12,870 --> 00:04:15,360 and also you get an error in your console. 116 116 00:04:15,360 --> 00:04:16,940 You can see this little cross there, 117 117 00:04:16,940 --> 00:04:19,953 and it says that error file not found. 118 118 00:04:20,810 --> 00:04:22,410 So it gives us file was not found, 119 119 00:04:22,410 --> 00:04:25,040 of course, we have to tell it 120 120 00:04:25,040 --> 00:04:26,720 where the CSS file is, 121 121 00:04:26,720 --> 00:04:29,400 and that is in styles/main.css, 122 122 00:04:29,400 --> 00:04:32,020 so now if we change that and we refresh the page, 123 123 00:04:32,020 --> 00:04:34,240 all of that works as expected. 124 124 00:04:34,240 --> 00:04:35,210 All right, well that's everything 125 125 00:04:35,210 --> 00:04:38,550 regarding how to link and look at this CSS styles 126 126 00:04:38,550 --> 00:04:40,360 that are being applied on an HTML page, 127 127 00:04:40,360 --> 00:04:41,620 I hope you've enjoyed this video, 128 128 00:04:41,620 --> 00:04:44,420 thanks for joining me, and I'll see you in the next one.