NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,260 Hi guys and welcome back. 2 00:00:01,289 --> 00:00:05,790 In this video, we're going to begin our CSS work by styling the header. 3 00:00:05,970 --> 00:00:07,260 So let's get to it. 4 00:00:08,360 --> 00:00:12,230 Here we've got our page so far and our HTML code. 5 00:00:12,260 --> 00:00:15,739 The first thing we want to do when we're working with CSS is create a 6 00:00:15,739 --> 00:00:18,170 separate file for our CSS styles. 7 00:00:18,492 --> 00:00:22,032 Sometimes you might see people put the CSS styles here in the head, 8 00:00:22,272 --> 00:00:25,872 but I find that files can get really long and confusing if you do that. 9 00:00:25,962 --> 00:00:28,032 So I recommend we create a separate file. 10 00:00:28,422 --> 00:00:31,942 I'm going to do that and call mine styles.css. 11 00:00:32,522 --> 00:00:37,772 Now we have to link the CSS file to our HTML file so that when we request the HTML 12 00:00:37,772 --> 00:00:42,722 file with our browser, when we load it, the browser knows to also go and grab the 13 00:00:42,722 --> 00:00:49,952 related or linked CSS files and apply the styles defined in there to our project. 14 00:00:50,222 --> 00:00:54,552 So we're going to do that with the link element . We type link and then the 15 00:00:54,552 --> 00:00:59,782 rel or relationship type is stylesheet and then the href is styles.css. 16 00:01:00,852 --> 00:01:02,652 And this is a void element. 17 00:01:03,006 --> 00:01:06,996 So now that we've done this, we can verify that the styles.css file is 18 00:01:07,026 --> 00:01:09,396 loading by going onto our website. 19 00:01:09,726 --> 00:01:12,576 Inspecting or opening the inspector or developer tools. 20 00:01:12,816 --> 00:01:16,236 Going to the network tab and then refreshing the page. 21 00:01:16,446 --> 00:01:19,896 And you should see styles.css appears there somewhere. 22 00:01:20,316 --> 00:01:21,366 Of course it's empty. 23 00:01:21,396 --> 00:01:24,996 So it loads very quickly and it doesn't do anything for our page just now, but 24 00:01:24,996 --> 00:01:26,286 we're going to change that in this video. 25 00:01:26,716 --> 00:01:29,656 Now that we've got this, I'm going to close this sidebar 26 00:01:29,836 --> 00:01:31,956 and go over to styles.css. 27 00:01:32,406 --> 00:01:36,966 We want to limit the size of the navbar so that it doesn't take up 28 00:01:36,966 --> 00:01:38,526 the entire width of the screen. 29 00:01:38,586 --> 00:01:43,806 If you remember, from our designs, the navbar was constrained to 640 pixels. 30 00:01:44,016 --> 00:01:48,681 So we're going to do navbar and that targets the navbar class which is 31 00:01:48,681 --> 00:01:51,201 the main navbar element using BEM. 32 00:01:51,561 --> 00:01:55,641 We're going to set max width to 640 pixels. 33 00:01:56,601 --> 00:01:59,481 So when we do that and refresh the page, you'll see that nothing changes, 34 00:01:59,481 --> 00:02:03,811 but as we make this bigger, you can see if we inspect the element. 35 00:02:04,051 --> 00:02:08,581 The navbar element is now limited to 640 pixels. 36 00:02:09,081 --> 00:02:12,411 The next thing we're going to do is we're going to add some margin and 37 00:02:12,411 --> 00:02:17,091 that's going to be 50 pixels above and below and auto left and right. 38 00:02:17,301 --> 00:02:19,701 That is going to give it some distance from the top and from 39 00:02:19,701 --> 00:02:23,331 subsequent elements and also is going to centre it on the page. 40 00:02:23,331 --> 00:02:24,441 So let me refresh that. 41 00:02:24,631 --> 00:02:27,811 You can see that some space was added and as we make this bigger, 42 00:02:27,834 --> 00:02:29,904 it remains centred on the page. 43 00:02:30,877 --> 00:02:33,907 The next thing we're going to do is we're going to add some padding. 44 00:02:34,087 --> 00:02:37,817 So we'll do padding zero 20 pixels. 45 00:02:38,387 --> 00:02:42,047 That is going to separate the contents from the edges of the container. 46 00:02:42,227 --> 00:02:45,567 So all the contents of the navbar are now separated, and the navbar 47 00:02:45,767 --> 00:02:47,357 is still going edge to edge. 48 00:02:47,857 --> 00:02:51,457 A common question would be why not put the 20 pixels here? 49 00:02:51,797 --> 00:02:55,587 If we do that, the element would no longer be centred when the size of 50 00:02:55,587 --> 00:02:58,437 the window is higher than 640 pixels. 51 00:02:58,467 --> 00:03:00,357 So we do want to keep the auto there. 52 00:03:00,857 --> 00:03:03,497 The next thing we want to do is we want to layout the elements 53 00:03:03,527 --> 00:03:05,717 as a row instead of a column. 54 00:03:05,747 --> 00:03:08,207 You can see that at the moment, the image and this text here 55 00:03:08,207 --> 00:03:09,557 are side by side, which is good. 56 00:03:09,887 --> 00:03:13,907 But then the list appears below it because it is a block element. 57 00:03:14,327 --> 00:03:16,247 We want to make them all up here in the same line. 58 00:03:16,247 --> 00:03:19,787 So we'll do display: flex and flex-direction: row. 59 00:03:20,317 --> 00:03:23,057 By doing this, they now appear side by side. 60 00:03:23,494 --> 00:03:27,394 The next thing we want to do is we want to make sure that the navigation 61 00:03:27,424 --> 00:03:31,954 is pushed to the right, as far as possible, while this remains on the left. 62 00:03:32,454 --> 00:03:34,344 You can see if we inspect this element. 63 00:03:34,344 --> 00:03:36,204 And let me just shrink that there. 64 00:03:36,277 --> 00:03:40,387 That we've got two elements inside the navbar we've got the navbar 65 00:03:40,387 --> 00:03:44,617 brand div and we've got the list which contains the navigation. 66 00:03:45,117 --> 00:03:49,777 What we want to do is we want to add a gap between the div and the 67 00:03:49,777 --> 00:03:52,237 list that is as big as possible. 68 00:03:52,751 --> 00:03:56,731 We can do that with justify-content: space-between. 69 00:03:57,741 --> 00:04:04,071 Justify content is a way of specifying the gap between elements using space between 70 00:04:04,191 --> 00:04:09,561 means that between elements, we're going to put all the gap and because we only 71 00:04:09,561 --> 00:04:13,071 have two elements, these two are going to be separated as much as possible. 72 00:04:14,071 --> 00:04:18,601 I'm going to leave another link to the CSS and guide from CSS-Tricks 73 00:04:18,601 --> 00:04:20,131 dot com, which is fantastic. 74 00:04:20,131 --> 00:04:23,011 And it has visual explanations on how this works. 75 00:04:23,251 --> 00:04:26,221 But that is essentially what that is doing is putting all the space 76 00:04:26,341 --> 00:04:28,621 that we can between our elements. 77 00:04:28,831 --> 00:04:30,211 And because we only have two elements. 78 00:04:30,301 --> 00:04:33,061 That is why one is at the left and the other one's at the right. 79 00:04:33,991 --> 00:04:36,481 If we had three elements, one of them would be in the middle. 80 00:04:36,691 --> 00:04:39,811 And the gap between the two sets of elements would be the same. 81 00:04:40,811 --> 00:04:45,101 I'm also going to set the font size to 24 pixels as per the design, and that's 82 00:04:45,101 --> 00:04:46,491 going to make things a little bit bigger. 83 00:04:47,591 --> 00:04:48,461 And working with flex. 84 00:04:48,461 --> 00:04:53,861 I like to see what results may CSS changes are going to have before I write them 85 00:04:53,861 --> 00:04:57,221 on my file and writing things here and then refreshing all the time can get 86 00:04:57,221 --> 00:05:03,431 a bit cumbersome so it can help to use the inspector here to write our CSS. 87 00:05:03,431 --> 00:05:06,041 So what I'm going to do is I'm going to open this here and I'm 88 00:05:06,041 --> 00:05:08,861 going to zoom in a little bit, so you guys can see a bit better. 89 00:05:09,861 --> 00:05:12,621 And then I'm going to close this down there and we're going to 90 00:05:12,621 --> 00:05:14,751 select the navbar__brand element. 91 00:05:15,141 --> 00:05:19,701 And we're going to modify the styles using the styles tab here. 92 00:05:20,211 --> 00:05:25,251 Any CSS styles that we write here will be applied to the element, but if we 93 00:05:25,251 --> 00:05:27,321 refresh the page, we will lose the styles. 94 00:05:27,501 --> 00:05:31,851 However, this is a great way to try out styles before you save them to your file. 95 00:05:32,721 --> 00:05:36,951 It also lets you play around with things because they sort of change as you type. 96 00:05:37,001 --> 00:05:39,611 So it's quite helpful to have that immediate feedback. 97 00:05:40,271 --> 00:05:43,781 For the brand here, I know that I want to align the logo 98 00:05:43,781 --> 00:05:45,461 and the text to be centered. 99 00:05:45,731 --> 00:05:49,631 So I'm going to use display flex, and you can see that that now 100 00:05:49,721 --> 00:05:53,841 produces some janky alignment, but then we're going to do align-items: 101 00:05:53,951 --> 00:05:56,831 center and now they are aligned. 102 00:05:57,831 --> 00:06:02,961 For the logo itself, which is in here, we're going to do margin-right, and 103 00:06:02,961 --> 00:06:04,941 we're going to set it to 30 pixels. 104 00:06:04,971 --> 00:06:08,421 And now that separates the logo from the text. 105 00:06:08,781 --> 00:06:09,981 So I quite like these styles. 106 00:06:10,041 --> 00:06:14,801 We can now grab them and go over to our CSS file and save them. 107 00:06:16,701 --> 00:06:24,351 So I'll just type navbar_ _brand there and do display flex, align items 108 00:06:24,536 --> 00:06:28,776 center, and then the navbar logo. 109 00:06:28,926 --> 00:06:31,596 And we're going to do margin right 30 pixels. 110 00:06:32,276 --> 00:06:36,986 This way of writing CSS is so common and is something I do all the time. 111 00:06:37,286 --> 00:06:40,016 And so coming in here, changing the CSS code. 112 00:06:40,296 --> 00:06:43,416 And playing around with things to find exactly what's right, because 113 00:06:43,416 --> 00:06:46,126 you can then come in here and say, maybe 30 pixels is too many. 114 00:06:46,126 --> 00:06:49,686 Let's try 20 and you can play around with things very quickly. 115 00:06:50,196 --> 00:06:53,166 Now, when we refresh the page, we're now going to use the file. 116 00:06:53,196 --> 00:06:57,126 So all of these inline styles that we've added using the inspector are 117 00:06:57,126 --> 00:07:02,366 going to disappear and we're going to keep the styles from the file. 118 00:07:03,396 --> 00:07:08,236 So you can see that I forgotten to add the navbar logo class 119 00:07:08,236 --> 00:07:09,306 here to my image element. 120 00:07:09,426 --> 00:07:12,626 So we're going to go to home.html and make sure to add that in there. 121 00:07:13,606 --> 00:07:14,746 But that's a small problem. 122 00:07:14,776 --> 00:07:17,296 Now we can refresh the page and all of that works. 123 00:07:18,296 --> 00:07:22,546 Let's work on the navigation next, you can see here, we've got a list 124 00:07:22,546 --> 00:07:26,056 of bullet points, which is not a great look for our navigation. 125 00:07:26,086 --> 00:07:30,256 So what we can do instead is we can do list-style: none, and that's going 126 00:07:30,256 --> 00:07:31,906 to get rid of that bullet points. 127 00:07:32,806 --> 00:07:36,136 However, you can see that there are still a lot of padding there to the left, so 128 00:07:36,196 --> 00:07:38,776 let's get rid of that, padding: zero. 129 00:07:39,776 --> 00:07:41,816 And we want to leave them out as a row. 130 00:07:41,816 --> 00:07:45,026 Again, they are appearing at the moment, one on top of the other, but we're going 131 00:07:45,026 --> 00:07:50,406 to do display flex and flex direction row. 132 00:07:50,906 --> 00:07:53,936 Although row is the default, so we don't actually have to assign it if 133 00:07:53,936 --> 00:07:57,746 we don't want to, but I like having it there just for completeness. 134 00:07:58,746 --> 00:08:02,906 Then we're going to set a color as well, which is, as per 135 00:08:02,906 --> 00:08:06,016 our designs, just like that. 136 00:08:07,016 --> 00:08:09,776 Of course remember that the elements themselves are links, so we're going to 137 00:08:09,776 --> 00:08:15,056 have to inherit the color so that they do pass through for each element here, 138 00:08:15,086 --> 00:08:17,816 we're going to add a margin on the left. 139 00:08:17,816 --> 00:08:20,246 So we're going to do margin left 50 pixels. 140 00:08:21,056 --> 00:08:25,496 And of course we have to do the same here, margin left 50 pixels. 141 00:08:25,856 --> 00:08:27,726 So we're going to do that on both elements. 142 00:08:28,296 --> 00:08:33,806 And then for the links themselves, we're going to add a text decoration of 143 00:08:33,806 --> 00:08:38,821 none, which gets rid ff the underline, and we're going to do color inherit, 144 00:08:38,881 --> 00:08:41,251 which makes the color that gray. 145 00:08:41,761 --> 00:08:42,121 Okay. 146 00:08:42,451 --> 00:08:44,881 Let's do this all in our CSS file. 147 00:08:45,091 --> 00:08:50,371 So again, we're going to grab the navbar navigation and what 148 00:08:50,371 --> 00:08:51,931 we're going to do is display flex. 149 00:08:51,931 --> 00:08:53,701 I like putting my display at the top. 150 00:08:54,121 --> 00:08:58,367 So let me just go back in here and notice that earlier on, we added each 151 00:08:58,367 --> 00:09:02,957 rule there sort of, as we saw fit, but now that we're working on our CSS file, 152 00:09:02,957 --> 00:09:07,637 I like putting things in a specific order, which is the display things first, 153 00:09:07,907 --> 00:09:10,647 and then some of the other , rules. 154 00:09:10,797 --> 00:09:11,757 So we're going to do that. 155 00:09:11,817 --> 00:09:14,337 Then we're going to do the padding zero, and then we're 156 00:09:14,337 --> 00:09:16,347 going to do the list style, none. 157 00:09:16,437 --> 00:09:17,757 And the color at the end. 158 00:09:18,757 --> 00:09:19,067 All right. 159 00:09:19,067 --> 00:09:20,077 So there we've got that. 160 00:09:20,197 --> 00:09:25,687 We can then go into our li element and here we're adding the stylist to each 161 00:09:25,687 --> 00:09:30,127 individual li, that's why we have to do it twice, but in our file, we're going 162 00:09:30,127 --> 00:09:34,117 to target the navbar__navigation-item class, which is going to apply 163 00:09:34,117 --> 00:09:35,497 the styles to both elements. 164 00:09:35,887 --> 00:09:41,327 So we'll do navbar navigation item, just like that. 165 00:09:41,477 --> 00:09:48,267 And we're going to do margin left 50 pixels, and finally the navbar link, 166 00:09:48,477 --> 00:09:53,037 which is going to have a text decoration of none and a color of inherit. 167 00:09:53,727 --> 00:09:56,877 Now we can grab this and refresh the page and you can see that 168 00:09:56,877 --> 00:09:58,677 we've got our styles applied. 169 00:09:59,677 --> 00:10:03,067 Something that we haven't done yet is sent the font family to 170 00:10:03,067 --> 00:10:05,497 be Lato as we had in the design. 171 00:10:05,617 --> 00:10:07,087 But we can do that a bit later on. 172 00:10:08,087 --> 00:10:11,237 For now that's everything for this video, you can see that most of 173 00:10:11,237 --> 00:10:15,737 everything we've done with CSS so far has been to change the spacing and 174 00:10:15,737 --> 00:10:17,717 directionality of elements using flex. 175 00:10:17,717 --> 00:10:21,227 We've turned the things from columns into rows, and we've added margins 176 00:10:21,227 --> 00:10:23,297 to separate things from each other. 177 00:10:23,692 --> 00:10:27,292 We've also changed a couple of colors, but you can see that the actual things 178 00:10:27,292 --> 00:10:29,842 we have changed are quite simple. 179 00:10:29,842 --> 00:10:34,012 We just have to sort of think of the changes we want to make in CSS 180 00:10:34,012 --> 00:10:38,752 terms and in one by one changes to the elements so that we can 181 00:10:38,752 --> 00:10:41,032 then translate them into CSS code. 182 00:10:41,272 --> 00:10:44,932 And even if at the moment, it all sounds very foreign and very complicated. 183 00:10:45,112 --> 00:10:48,532 I promise that it's going to get much easier as we code it more with CSS. 184 00:10:48,922 --> 00:10:52,192 So thank you guys for joining me in this video and I'll see you in the next one.