NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,290 Hi guys and welcome back. 2 00:00:01,320 --> 00:00:01,830 In this video. 3 00:00:01,860 --> 00:00:03,360 Let's talk about BEM. 4 00:00:03,959 --> 00:00:08,189 BEM is a CSS methodology and a naming scheme that is really popular. 5 00:00:08,610 --> 00:00:14,220 It uses classes almost exclusively so no ID or type selectors, no inline styles 6 00:00:14,310 --> 00:00:16,710 and often no important declarations. 7 00:00:17,020 --> 00:00:19,960 This helps with specificity because everything has the same level of 8 00:00:19,960 --> 00:00:23,650 specificity and what happens is we use single classes for everything, and it 9 00:00:23,650 --> 00:00:25,690 becomes really easy to work around that. 10 00:00:26,313 --> 00:00:28,908 BEM stands for Block Element Modifier. 11 00:00:28,998 --> 00:00:33,338 So let's take a look at these three building blocks of BEM and how they work. 12 00:00:33,838 --> 00:00:35,578 The first one is the block. 13 00:00:35,908 --> 00:00:40,318 A block is a meaningful stand alone entity in your code. 14 00:00:40,348 --> 00:00:46,708 So for example, a header, a menu bar, a form, any other element that can be stand 15 00:00:46,708 --> 00:00:48,808 alone and mean something on its own. 16 00:00:49,828 --> 00:00:52,648 Block classes are generally single words, but you can separate 17 00:00:52,648 --> 00:00:54,028 multiple words with a hyphen. 18 00:00:54,278 --> 00:00:58,328 Elements are separated with a double underscore and elements 19 00:00:58,328 --> 00:01:02,768 are parts of a block that have a meaning that is tied to the block. 20 00:01:03,268 --> 00:01:07,258 For example, the header logo would be header__logo. 21 00:01:07,708 --> 00:01:13,368 Menu item could be menu__item and form fields could be form__field. 22 00:01:13,848 --> 00:01:16,278 This structure is useful for a couple of reasons. 23 00:01:16,548 --> 00:01:19,818 First that it shows very clearly how elements fit into the overall 24 00:01:19,818 --> 00:01:21,168 structure of the style sheet. 25 00:01:21,548 --> 00:01:25,891 This is not some generic stand alone item that we are talking about, for example, 26 00:01:25,891 --> 00:01:27,391 if we were talking about menu items. 27 00:01:27,391 --> 00:01:29,725 It is an item specific to the menu. 28 00:01:30,225 --> 00:01:33,195 And this gives us a lot of context, it helps keep our code organized. 29 00:01:33,695 --> 00:01:36,605 The other reason the structure is handy is that we only need to use 30 00:01:36,605 --> 00:01:39,935 a single class for these child elements and they don't even need to 31 00:01:39,935 --> 00:01:42,065 be nested within the HTML document. 32 00:01:42,665 --> 00:01:47,043 So you don't have to have menu item classes inside a menu class, for 33 00:01:47,043 --> 00:01:48,723 example, or inside anything else? 34 00:01:49,263 --> 00:01:53,026 This is handy and is preferable to using combinators to construct 35 00:01:53,026 --> 00:01:57,466 more complex selectors because that introduces issues with specificity. 36 00:01:57,826 --> 00:02:02,206 By using a single class, we can easily overwrite the styles with a single class. 37 00:02:03,186 --> 00:02:06,666 Then we've got modifiers, which are variants of the basic styles 38 00:02:06,666 --> 00:02:07,836 for a block or an element. 39 00:02:07,866 --> 00:02:10,536 They use the blocker element class and a double hyphen to 40 00:02:10,536 --> 00:02:12,276 separate the modifier style. 41 00:02:13,056 --> 00:02:16,116 These are vital for creating reusable styles, for example, here 42 00:02:16,116 --> 00:02:19,086 we've got the menu__item--selected. 43 00:02:19,106 --> 00:02:23,786 So presumably this is some sort of style that we get applied to a menu item when 44 00:02:23,786 --> 00:02:28,586 we have it selected probably when we are in the page that menu item is for. 45 00:02:29,013 --> 00:02:34,409 So this allows us to not have to create different element names for the same thing 46 00:02:34,499 --> 00:02:36,809 and allows us to change them as we want. 47 00:02:37,309 --> 00:02:40,969 Let's take a look at BEM in action with a coding example so 48 00:02:40,999 --> 00:02:42,679 let's go over to our code editor. 49 00:02:43,216 --> 00:02:46,066 So here's our code editor and I've opened a new project and 50 00:02:46,066 --> 00:02:48,076 this is the index.html file. 51 00:02:48,576 --> 00:02:50,136 Nothing we haven't seen at this stage. 52 00:02:50,166 --> 00:02:51,726 We've got our HTML boilerplate. 53 00:02:51,756 --> 00:02:56,946 We've linked a CSS file that has the wrong name there and we've got a form 54 00:02:56,976 --> 00:03:01,476 inside our body with some paragraphs and inside them we've got labels and inputs. 55 00:03:01,506 --> 00:03:03,606 So this is what that ends up looking like. 56 00:03:03,606 --> 00:03:05,526 We've also got a button down at the bottom. 57 00:03:06,321 --> 00:03:08,661 First of all, let's think about the components of the documents so 58 00:03:08,661 --> 00:03:11,481 we can figure out what our class structure is going to look like. 59 00:03:11,511 --> 00:03:14,918 I would start with the form elements since that wraps all of 60 00:03:14,918 --> 00:03:16,888 the visible content of our document. 61 00:03:17,408 --> 00:03:21,758 Clearly the form as a whole represents a block level element in BEM terms, 62 00:03:21,758 --> 00:03:23,588 because it's a self contained unit. 63 00:03:23,738 --> 00:03:25,268 It's basically the whole content of the page. 64 00:03:25,768 --> 00:03:30,028 Conversely, the p elements here are not independent units. 65 00:03:30,028 --> 00:03:34,288 They represent form groups, collections of labels and input fields and they only 66 00:03:34,288 --> 00:03:36,628 make sense in the context of this form. 67 00:03:37,174 --> 00:03:39,064 So they should probably be elements. 68 00:03:39,564 --> 00:03:41,934 Some of the other elements are not so cut and dry. 69 00:03:42,264 --> 00:03:46,214 The input elements, for example, they are likely to be blocked level elements 70 00:03:46,214 --> 00:03:50,084 because they could be used outside of the form, like the one we're building here, 71 00:03:50,084 --> 00:03:51,764 and we could use it in a different form. 72 00:03:52,288 --> 00:03:55,498 We may have an identically styled input element, for example, in 73 00:03:55,498 --> 00:03:58,978 some sort of header bar to do a quick login or to do search. 74 00:03:59,478 --> 00:04:04,188 But the input elements elsewhere maybe completely differently styled so there's 75 00:04:04,188 --> 00:04:06,828 no reason to share styles necessarily. 76 00:04:06,828 --> 00:04:09,588 So you kind of have to use your judgment in some of these cases, whether you 77 00:04:09,588 --> 00:04:12,771 want to make these inputs elements of this form, or you want to make 78 00:04:12,771 --> 00:04:14,841 them blocks that you can then reuse. 79 00:04:15,341 --> 00:04:19,451 Let's say that we do want to reuse them and we'll make these into blocks. 80 00:04:19,481 --> 00:04:20,891 I'll start off with the form. 81 00:04:20,921 --> 00:04:22,401 I'm going to give it a class of form. 82 00:04:23,031 --> 00:04:25,728 And then for these inputs, I'm going to give it a class of input. 83 00:04:26,251 --> 00:04:29,771 So I'll do the same for these other inputs down there as well. 84 00:04:30,341 --> 00:04:34,378 Now I mentioned that the button element, just like the input, should probably 85 00:04:34,378 --> 00:04:37,668 be a block because buttons make sense even if we remove them from the form. 86 00:04:37,948 --> 00:04:40,108 And we're also likely to use them elsewhere in our site. 87 00:04:40,288 --> 00:04:43,768 So I would give this a class of button. 88 00:04:44,268 --> 00:04:48,198 Remember that even though the class name is the same as the tag name, we're 89 00:04:48,228 --> 00:04:53,958 relying on classes here and not on tag names so that we can then change 90 00:04:53,958 --> 00:04:55,548 these and reassign these later on. 91 00:04:55,698 --> 00:05:00,088 And so everything is using classes, for blocks, elements, and modifiers, so that 92 00:05:00,088 --> 00:05:02,368 we don't have specificity issues later on. 93 00:05:02,868 --> 00:05:06,408 All right, so we've got our blocks, which are the form, the input and the button. 94 00:05:06,678 --> 00:05:09,078 Now let's look at the elements. 95 00:05:09,465 --> 00:05:12,465 I think that the paragraphs, as I mentioned earlier, are groups 96 00:05:12,465 --> 00:05:15,015 of elements and they only make sense in the context of the form. 97 00:05:15,015 --> 00:05:20,565 So I would give it a class of form__ and then the element name, which 98 00:05:20,565 --> 00:05:22,155 in my case is going to be group. 99 00:05:22,635 --> 00:05:24,195 I think this makes quite a lot of sense in English. 100 00:05:24,225 --> 00:05:28,515 Form group describes adequately what this is so I would use this class 101 00:05:28,575 --> 00:05:30,705 for all the paragraph tags here. 102 00:05:31,205 --> 00:05:33,995 Similarly, the labels don't make sense on their own. 103 00:05:33,995 --> 00:05:38,045 They are part of this forum and they're relying on the input 104 00:05:38,285 --> 00:05:42,575 to make sense so we're going to give them a class of form label. 105 00:05:43,075 --> 00:05:45,295 We don't have any modifier classes at this point. 106 00:05:45,295 --> 00:05:48,595 So we can just add these and get to writing the styles. 107 00:05:49,095 --> 00:05:52,845 Our first step is always going to be to set the box sizing to border box 108 00:05:52,875 --> 00:05:57,225 and to do that across the entire page so that's why I'm doing this here. 109 00:05:57,555 --> 00:06:01,005 We can use the universal selector to select everything and set it to inherit 110 00:06:01,035 --> 00:06:04,515 just in case we do want to change it for a particular group of elements later on. 111 00:06:05,015 --> 00:06:08,045 We can also set a global font size for the document. 112 00:06:08,045 --> 00:06:09,995 I'm going to set it to 18 pixels. 113 00:06:10,391 --> 00:06:12,761 I think that's a pretty good font size and also what I'm going to 114 00:06:12,761 --> 00:06:17,411 do in the body is I'm going to set the font family to be Sans serif. 115 00:06:17,411 --> 00:06:20,291 So just any default sans-serif of the operating system. 116 00:06:20,291 --> 00:06:21,971 This is now looking like that. 117 00:06:22,491 --> 00:06:24,871 Note that we're setting the font size on the HTML element 118 00:06:24,901 --> 00:06:26,191 and not on the body element. 119 00:06:26,401 --> 00:06:31,321 This is so that it changes the root em size or the rem size that 120 00:06:31,321 --> 00:06:32,911 we can then reuse across the page. 121 00:06:33,411 --> 00:06:37,371 Now let's write the styles for the form specifically, and we can start with the 122 00:06:37,371 --> 00:06:40,601 form container itself or the form block. 123 00:06:41,101 --> 00:06:43,531 The goal of our styles is going to be to create a form 124 00:06:43,531 --> 00:06:44,791 that looks kind of like this. 125 00:06:44,821 --> 00:06:48,631 We've got a bit of a starting point here of what we want to design. 126 00:06:48,841 --> 00:06:50,311 You can see there's some background colors. 127 00:06:50,311 --> 00:06:51,631 You can see, these are bold. 128 00:06:51,871 --> 00:06:54,301 The button has some padding and a background color as well. 129 00:06:54,421 --> 00:06:56,251 So this is what we're aiming for and the styles that we're going to 130 00:06:56,251 --> 00:06:58,341 write to get us to this end point. 131 00:06:58,401 --> 00:07:01,971 I'm going to leave this open so that we can make sure that our styles are 132 00:07:01,971 --> 00:07:03,471 matching this image as we go along. 133 00:07:04,221 --> 00:07:05,751 The first thing I'm going to do is I'm going to set the 134 00:07:05,751 --> 00:07:08,211 width of the form to 25 rem. 135 00:07:08,241 --> 00:07:11,751 That's going to set the size of the form to this specific value, 136 00:07:11,961 --> 00:07:16,451 which is 25 times 18 pixels, so that it has the size that we want. 137 00:07:16,701 --> 00:07:20,241 Note that at the moment it's not centred or anything so it still doesn't look right 138 00:07:20,241 --> 00:07:21,801 at all, but we're going to get to that. 139 00:07:22,701 --> 00:07:25,971 By setting a margin of zero auto, we're going to centre this. 140 00:07:26,091 --> 00:07:28,611 Remember that zero is the top and bottom margins. 141 00:07:28,881 --> 00:07:30,501 Auto is the left and right margins. 142 00:07:30,531 --> 00:07:34,311 Here we are going to set them to as large as possible so that 143 00:07:34,311 --> 00:07:35,571 the form is centred on the page. 144 00:07:35,965 --> 00:07:40,685 Setting the background, we're going to do 3d4o5b, which is the 145 00:07:40,685 --> 00:07:42,065 color that we've got over there. 146 00:07:42,395 --> 00:07:45,485 And now when we refresh the page, we've got that color in here. 147 00:07:45,985 --> 00:07:49,795 Note that the borders here are square borders whereas in our image, they are 148 00:07:49,795 --> 00:07:55,255 rounded borders so we do want to set a border radius of eight pixels in order 149 00:07:55,255 --> 00:07:57,205 to change that and make them rounded. 150 00:07:57,705 --> 00:08:00,705 Now, obviously this form does not look good at all. 151 00:08:00,765 --> 00:08:03,795 The elements are way too close to the sides of the form so we 152 00:08:03,795 --> 00:08:05,685 can fix that with some padding. 153 00:08:05,845 --> 00:08:10,555 We're going to do padding 1rem and 2rem, and that is going to add some space 154 00:08:10,585 --> 00:08:13,615 inside the background for these elements. 155 00:08:14,115 --> 00:08:18,585 Also the black text on purple background is not readable at all so what we're 156 00:08:18,585 --> 00:08:23,628 going to do is we're going to change the text color to f2cc8f, which is just 157 00:08:23,638 --> 00:08:27,538 a shade here of yellow, and that is going to make this much more readable. 158 00:08:27,598 --> 00:08:31,648 It's usually a good idea to set the color on container elements rather 159 00:08:31,648 --> 00:08:34,168 than setting the color individually on the children, because that 160 00:08:34,168 --> 00:08:37,678 saves us writing some unnecessary and repetitive color definitions. 161 00:08:38,178 --> 00:08:40,398 So that's our form block done. 162 00:08:40,478 --> 00:08:42,168 Let's tackle the form elements. 163 00:08:42,668 --> 00:08:46,928 We can see that the label sits above the field so we do want 164 00:08:46,928 --> 00:08:48,195 to make sure that happens. 165 00:08:48,388 --> 00:08:49,438 Let's start with that. 166 00:08:49,905 --> 00:08:53,895 I'm going to work on the form group and what I'm going to do is I'm going to tell 167 00:08:53,895 --> 00:08:58,995 the form group, which remember consists of label and field to be laid out as 168 00:08:58,995 --> 00:09:03,375 a column so that every element in the group appears one on top of each other. 169 00:09:03,765 --> 00:09:07,125 By default, you can see that labels are appearing as inline elements 170 00:09:07,125 --> 00:09:08,835 together with the field so side-by-side. 171 00:09:09,105 --> 00:09:10,005 We're going to change that. 172 00:09:10,155 --> 00:09:12,915 And how we do that is we're going to use flex. 173 00:09:13,465 --> 00:09:19,085 By setting display to flex, now we can do flex- direction is column, and that 174 00:09:19,085 --> 00:09:24,145 is going to set our elements to display in a column just like that, when we use 175 00:09:24,145 --> 00:09:28,975 flex and set the flex direction to column, it also makes all the elements stretch 176 00:09:29,005 --> 00:09:31,135 to the full width of their container. 177 00:09:31,135 --> 00:09:33,775 So that is why these fields are now getting bigger as well. 178 00:09:34,275 --> 00:09:36,975 If you want to learn more about flex, we're going to have a lecture on it 179 00:09:36,975 --> 00:09:39,525 or a set of lectures on it later on in this course, but there's also a 180 00:09:39,525 --> 00:09:42,675 great guide on CSSTricks.com that we're going to leave linked in the 181 00:09:42,675 --> 00:09:44,235 resources section of this lecture. 182 00:09:44,735 --> 00:09:47,915 Flex is a really powerful tool that you're going to be using all the time. 183 00:09:48,415 --> 00:09:51,115 For the form labels, we don't really have to do much. 184 00:09:51,385 --> 00:09:53,995 All we have to do is separate them slightly from the fields 185 00:09:54,385 --> 00:09:55,345 because they are a bit too close. 186 00:09:55,345 --> 00:09:59,845 So we'll do margin-bottom: 0.25rem, and we'll also make 187 00:09:59,845 --> 00:10:02,095 them bold so font-weight: 600. 188 00:10:02,595 --> 00:10:06,225 When we do that, these look at it more like what we've got on our image here. 189 00:10:06,725 --> 00:10:08,375 Of course, the fields look completely different. 190 00:10:08,375 --> 00:10:10,145 So that's what we're going to get to next. 191 00:10:10,175 --> 00:10:12,185 Let's modify the input blocks. 192 00:10:12,215 --> 00:10:15,395 So we do input and there's a few things we have to do here. 193 00:10:15,395 --> 00:10:18,755 We have to change the background color because it's a bit different between both. 194 00:10:18,845 --> 00:10:21,815 Here, we've got white and here we've got a shade of gray, maybe 195 00:10:21,815 --> 00:10:22,775 difficult to see in the video. 196 00:10:23,313 --> 00:10:26,853 We also want to add some padding and we want to change the border radius. 197 00:10:27,003 --> 00:10:30,203 So what we will do is we will set the font-size to inherit. 198 00:10:30,263 --> 00:10:34,223 Make sure that it is 18 pixels because input fields have, by default, a font 199 00:10:34,223 --> 00:10:37,513 size already set by the browser so if we do want to force the inheritance on that. 200 00:10:38,003 --> 00:10:41,883 We're going to set the padding to 0.5rem and 0.75rem. 201 00:10:42,083 --> 00:10:44,373 That is basically 0.5 and 0.75. 202 00:10:44,633 --> 00:10:47,513 So that makes them a little bit bigger, but do make sure to check 203 00:10:47,513 --> 00:10:51,803 that the text is still just the same size as it was earlier. 204 00:10:51,803 --> 00:10:54,353 We've just added some spacing inside the element. 205 00:10:54,853 --> 00:10:57,673 We're going to set the background to #eee and that is going to 206 00:10:57,673 --> 00:10:59,523 give it this shade of grey. 207 00:11:00,040 --> 00:11:01,630 We're going to say border to none. 208 00:11:02,166 --> 00:11:06,007 And that is going to get rid of this sort of inset border that it's got. 209 00:11:06,516 --> 00:11:09,747 Finally, we're going to set the border radius to four pixels so 210 00:11:09,747 --> 00:11:11,516 that they become slightly rounded. 211 00:11:11,767 --> 00:11:14,307 You can notice here that I've added uneven padding. 212 00:11:14,307 --> 00:11:18,627 A slightly more padding at the left and right than at the top or bottom. 213 00:11:18,837 --> 00:11:21,237 That's really common for buttons and input fields and you're going 214 00:11:21,237 --> 00:11:22,527 to start noticing everywhere. 215 00:11:22,767 --> 00:11:25,587 It just helps readability by centering things in the page. 216 00:11:25,617 --> 00:11:28,257 You're going to see the same thing here in the button as well. 217 00:11:28,757 --> 00:11:31,067 Finally, let's take care of the button block. 218 00:11:31,077 --> 00:11:33,767 So we'll do button and we've got it there. 219 00:11:34,037 --> 00:11:37,757 The button is by far the most complex of things that we're styling 220 00:11:37,757 --> 00:11:39,377 here, but we can break it down. 221 00:11:39,797 --> 00:11:43,157 Let's start with the obvious stuff, the background color, and the text color. 222 00:11:43,637 --> 00:11:46,873 So we can do background and the background color that we've decided in 223 00:11:46,873 --> 00:11:51,453 our design is e07a5f so that's going to set the background color like that. 224 00:11:52,045 --> 00:11:58,095 We also want to change the text color so we'll do color f4f1de Just like that. 225 00:11:58,125 --> 00:11:59,725 Make sure to put the semi-colon. 226 00:12:00,225 --> 00:12:04,635 We want to remove the border because at this moment it has this boxy border in it. 227 00:12:04,635 --> 00:12:06,435 That looks kind of 3D we don't want that. 228 00:12:07,185 --> 00:12:11,085 And the border radius to four pixels as well to match the inputs. 229 00:12:11,558 --> 00:12:14,198 Now, obviously the font size is not quite right. 230 00:12:14,228 --> 00:12:15,998 It's a bit too small compared to our design. 231 00:12:15,998 --> 00:12:19,172 So we're going to change that and I'll put it in the font size here to the top, 232 00:12:19,262 --> 00:12:20,852 but it doesn't matter where you put it. 233 00:12:21,372 --> 00:12:23,422 1.1rem is going to make it a little bit bigger. 234 00:12:23,452 --> 00:12:27,362 By default the font size, I think is like 14 pixels or 16 pixels so 235 00:12:27,412 --> 00:12:32,362 we're sending it to 1.1rem we're actually setting it to 20.8 pixels. 236 00:12:32,572 --> 00:12:34,822 Remember the root font size is 18 pixels. 237 00:12:35,322 --> 00:12:37,902 Okay, so this is looking a little bit better, but we still 238 00:12:37,902 --> 00:12:39,342 have some work left to do. 239 00:12:39,958 --> 00:12:44,358 We need to add some internal padding to separate the text from the sides. 240 00:12:44,388 --> 00:12:45,648 So let's do that first. 241 00:12:45,678 --> 00:12:49,208 I'm going to do padding 0.5rem and 2rem. 242 00:12:49,598 --> 00:12:52,888 Notice the left and right padding being much larger here. 243 00:12:52,948 --> 00:12:55,648 So that's going to make this button look more like a button. 244 00:12:56,228 --> 00:12:58,508 We also want to separate it from other elements. 245 00:12:58,508 --> 00:13:04,028 So I'll add some margin: 1.5rem at the top auto 0.5rem and auto. 246 00:13:04,528 --> 00:13:08,338 Note that here even though I've set the left and right margins to auto. 247 00:13:08,878 --> 00:13:11,818 It hasn't shifted the button into the middle that's because 248 00:13:11,818 --> 00:13:13,768 the button is an inline element. 249 00:13:13,838 --> 00:13:16,148 So what we're going to do instead is we're going to set it to display: 250 00:13:16,208 --> 00:13:19,088 block, and then it's not going to be an inline element anymore. 251 00:13:19,238 --> 00:13:21,218 And now it can be centered to using margins. 252 00:13:21,718 --> 00:13:25,738 So this looks kind of done, but we do have to make a couple of final changes. 253 00:13:26,098 --> 00:13:28,858 To make sure that users know the button is clickable. 254 00:13:29,038 --> 00:13:33,058 We want to make sure that it shows up as a hand when users hover over the button. 255 00:13:33,058 --> 00:13:34,888 At the moment, it doesn't look clickable at all. 256 00:13:35,488 --> 00:13:39,358 And we also want to change the styles somehow when the user 257 00:13:39,358 --> 00:13:40,438 is hovering over the button. 258 00:13:40,468 --> 00:13:42,268 We're going to change the background color for that. 259 00:13:42,908 --> 00:13:46,448 What we'll do is we will add it to the button, a cursor: pointer. 260 00:13:46,878 --> 00:13:48,798 And that just means that whenever we're hovering over it, we're going 261 00:13:48,798 --> 00:13:50,358 to change to a clickable cursor. 262 00:13:50,958 --> 00:13:55,678 And then we're going to do .button: hover and this is now applying styles 263 00:13:55,798 --> 00:13:57,538 whenever we're hovering over the button. 264 00:13:57,598 --> 00:14:00,658 So here we're going to set the background to a slightly different color 265 00:14:00,658 --> 00:14:05,662 of ec8164, which is just a slightly lighter version of the same color. 266 00:14:05,882 --> 00:14:08,342 Now it looks a bit more clickable when you hover over it. 267 00:14:08,842 --> 00:14:10,102 And with that, we're done. 268 00:14:11,042 --> 00:14:14,552 You've got the complete code linked in the resources section of this lecture. 269 00:14:14,552 --> 00:14:16,232 So please do download it. 270 00:14:16,232 --> 00:14:17,122 Have a play around with it. 271 00:14:17,122 --> 00:14:17,912 Change the styles. 272 00:14:17,982 --> 00:14:19,982 Make this look like what you want it to look like. 273 00:14:20,222 --> 00:14:24,242 That's really going to help you learn more about CSS and how different things work. 274 00:14:24,512 --> 00:14:27,152 And of course, if anything doesn't make sense or it's 275 00:14:27,152 --> 00:14:30,292 not fully clear what different declarations do or how they work. 276 00:14:30,502 --> 00:14:30,982 Don't worry! 277 00:14:30,982 --> 00:14:33,712 We're going to be going into everything as we progress through the course, 278 00:14:33,952 --> 00:14:36,742 but also feel free to ask a question in the course Q&A, if you want to. 279 00:14:37,412 --> 00:14:40,042 Alright, thanks guys for joining me in this video, hope you've enjoyed 280 00:14:40,042 --> 00:14:41,692 it and I see you in the next one