1 00:00:02,040 --> 00:00:04,740 Now that we defined all those variables, 2 00:00:04,740 --> 00:00:06,910 those CSS variables, 3 00:00:06,910 --> 00:00:08,680 we can of course use them. 4 00:00:08,680 --> 00:00:11,960 And for the moment I'll stay in the base.css file here. 5 00:00:11,960 --> 00:00:15,040 And after defining my HTML styles, 6 00:00:15,040 --> 00:00:17,080 including all those variables, 7 00:00:17,080 --> 00:00:19,580 I'll define some styles for the body specifically. 8 00:00:20,830 --> 00:00:21,960 And here for the body, 9 00:00:21,960 --> 00:00:22,830 I, for example, 10 00:00:22,830 --> 00:00:26,140 wanna set a background color. 11 00:00:26,140 --> 00:00:30,200 So we can use the background-color CSS property for that. 12 00:00:30,200 --> 00:00:32,570 And that allows us to set a background color 13 00:00:32,570 --> 00:00:34,330 for the entire page. 14 00:00:34,330 --> 00:00:37,217 Now, here, I wanna use one of my variables 15 00:00:37,217 --> 00:00:40,130 and we do this with the built-in VAR function, 16 00:00:40,130 --> 00:00:42,190 which we can use in CSS. 17 00:00:42,190 --> 00:00:44,930 And here, we then refer to the name of a variable. 18 00:00:44,930 --> 00:00:48,280 In my case, color-gray-500. 19 00:00:48,280 --> 00:00:50,640 That's the background color I want to use 20 00:00:50,640 --> 00:00:54,763 because I want to build a website that uses this dark look. 21 00:00:56,290 --> 00:01:00,460 Now this VAR function takes an optional second value 22 00:01:00,460 --> 00:01:02,320 separated by a comma, 23 00:01:02,320 --> 00:01:04,260 which would be a fallback value 24 00:01:04,260 --> 00:01:06,410 if that variable isn't found, 25 00:01:06,410 --> 00:01:09,140 but I know that the variable will be found here 26 00:01:09,140 --> 00:01:11,093 so I can omit it. 27 00:01:11,980 --> 00:01:13,840 Now background color isn't everything. 28 00:01:13,840 --> 00:01:15,800 I also want to set a main text color. 29 00:01:15,800 --> 00:01:18,580 And of course, that should be a contrasting color, 30 00:01:18,580 --> 00:01:20,520 which is why I did define 31 00:01:20,520 --> 00:01:24,550 my color-gray-100 shade, 32 00:01:24,550 --> 00:01:26,400 which is a lighter gray shade, 33 00:01:26,400 --> 00:01:28,823 which is more on the white-ish side. 34 00:01:30,850 --> 00:01:32,170 And, last but not least, 35 00:01:32,170 --> 00:01:36,230 I'll set margin to zero because by default many browsers 36 00:01:36,230 --> 00:01:38,790 give body a margin so that there 37 00:01:38,790 --> 00:01:40,540 is some spacing on the edges, 38 00:01:40,540 --> 00:01:43,150 and I don't want to have any spacing here. 39 00:01:43,150 --> 00:01:47,000 The body should not have any surrounding empty space. 40 00:01:47,000 --> 00:01:49,800 That's why I will override the browser defaults 41 00:01:49,800 --> 00:01:50,860 with margin:0. 42 00:01:51,930 --> 00:01:54,720 And since this will have a higher specificity, 43 00:01:54,720 --> 00:01:57,790 my own styles defined in such a tag selector 44 00:01:57,790 --> 00:02:00,920 have a higher specificity than the browser defaults, 45 00:02:00,920 --> 00:02:03,943 this will win over the browser defaults. 46 00:02:05,830 --> 00:02:08,900 In case specificity doesn't tell you anything, 47 00:02:08,900 --> 00:02:12,390 definitely revisit those basic CSS sections 48 00:02:12,390 --> 00:02:14,920 we had in the course where we introduce you 49 00:02:14,920 --> 00:02:16,793 to this concept in depth. 50 00:02:18,060 --> 00:02:20,170 So with that, if we reload this page, 51 00:02:20,170 --> 00:02:21,850 we have this dark look, 52 00:02:21,850 --> 00:02:23,500 and we can still read the text, 53 00:02:23,500 --> 00:02:25,570 and this doesn't look too bad. 54 00:02:25,570 --> 00:02:29,033 Of course we're still not there yet, but it is a first step. 55 00:02:30,620 --> 00:02:33,830 The next step is that I wanna ensure 56 00:02:33,830 --> 00:02:37,940 that my main element, 57 00:02:37,940 --> 00:02:40,340 which I have on a signup page, for example, 58 00:02:40,340 --> 00:02:42,690 and which I will have on every page, 59 00:02:42,690 --> 00:02:47,280 has some nice dimensions that center the content 60 00:02:47,280 --> 00:02:51,140 because every page content for all my to-be-added pages 61 00:02:51,140 --> 00:02:52,510 should be centered. 62 00:02:52,510 --> 00:02:55,230 Therefore, back in base.css, 63 00:02:55,230 --> 00:03:00,000 I will also target the main element by it's a tag type here, 64 00:03:00,000 --> 00:03:01,520 because for all the pages 65 00:03:01,520 --> 00:03:04,970 I wanna set this to a specific size. 66 00:03:04,970 --> 00:03:08,320 That's why I'll do it in the base.css file. 67 00:03:08,320 --> 00:03:11,380 And here I'll then give it a width of 90%, 68 00:03:11,380 --> 00:03:15,090 but on mobile devices that will be great. 69 00:03:15,090 --> 00:03:15,923 And of course, 70 00:03:15,923 --> 00:03:19,670 I do wanna optimize this site for mobile devices 71 00:03:19,670 --> 00:03:21,520 and small screens as well, 72 00:03:21,520 --> 00:03:22,980 but on bigger screens, 73 00:03:22,980 --> 00:03:26,940 a width of 90% quickly will be too wide. 74 00:03:26,940 --> 00:03:30,660 Therefore I'll always add the max-width property 75 00:03:30,660 --> 00:03:33,740 to give this width of the element a limit. 76 00:03:33,740 --> 00:03:36,730 It should generally be 90%, 77 00:03:36,730 --> 00:03:39,590 but no more than let's say 50rem. 78 00:03:39,590 --> 00:03:42,930 And this is just some arbitrary value I came up with. 79 00:03:42,930 --> 00:03:46,183 Of course, you can experiment with different values here. 80 00:03:47,570 --> 00:03:50,700 Now then, I also want to make sure that my main content 81 00:03:50,700 --> 00:03:53,140 doesn't sit on the left edge of the page, 82 00:03:53,140 --> 00:03:55,040 but instead is centered. 83 00:03:55,040 --> 00:03:58,970 And you'll learn that this can be achieved with margin: auto 84 00:03:58,970 --> 00:04:01,760 or margin: 0 auto, doesn't matter, 85 00:04:01,760 --> 00:04:04,290 but the margin left and right has to be auto. 86 00:04:04,290 --> 00:04:07,550 And that is achieved both with this shortest notation, 87 00:04:07,550 --> 00:04:09,610 as well as with this notation 88 00:04:09,610 --> 00:04:12,070 where to 0 is margin top and bottom, 89 00:04:12,070 --> 00:04:13,600 which doesn't matter to us here 90 00:04:13,600 --> 00:04:17,623 and this here auto, this is the margin to left and right. 91 00:04:19,260 --> 00:04:24,020 And if we now save this and reload, the content is centered. 92 00:04:24,020 --> 00:04:25,430 The text is not centered, 93 00:04:25,430 --> 00:04:27,600 but we have this general frame here. 94 00:04:27,600 --> 00:04:30,910 And if he would inspect this in a browser dev tools, 95 00:04:30,910 --> 00:04:33,080 then of course, if I hover over main, 96 00:04:33,080 --> 00:04:36,310 you would see that this has this margin 97 00:04:36,310 --> 00:04:37,890 on the left and the right, 98 00:04:37,890 --> 00:04:40,350 these orange borders here that's the margin 99 00:04:40,350 --> 00:04:41,800 in the dev tools. 100 00:04:41,800 --> 00:04:44,790 And if I actually 101 00:04:44,790 --> 00:04:47,310 give us a bit more room here, 102 00:04:47,310 --> 00:04:50,490 you see this margin gets bigger, 103 00:04:50,490 --> 00:04:53,780 and this box here, this blue box in the middle, 104 00:04:53,780 --> 00:04:56,220 at some point doesn't grow anymore 105 00:04:56,220 --> 00:04:58,723 because we have this max width set up. 106 00:04:59,960 --> 00:05:01,170 And here I'm zoomed in quite a bit, 107 00:05:01,170 --> 00:05:02,540 if I would zoom out, 108 00:05:02,540 --> 00:05:04,253 this would be even clearer to see, 109 00:05:05,310 --> 00:05:08,860 but I'll zoom back into to make this more visible. 110 00:05:08,860 --> 00:05:11,363 So that is the main styling. 111 00:05:12,330 --> 00:05:14,280 Now there are more general styles, 112 00:05:14,280 --> 00:05:16,110 which I wanna set up for this page 113 00:05:16,110 --> 00:05:18,517 and the next general style I'll add 114 00:05:18,517 --> 00:05:20,580 is the unordered list style, 115 00:05:20,580 --> 00:05:24,960 which I simply want to set to some default styling 116 00:05:24,960 --> 00:05:26,800 where I have no list style. 117 00:05:26,800 --> 00:05:28,420 So list-style set to none, 118 00:05:28,420 --> 00:05:31,513 to not have any bullet points or anything like this. 119 00:05:32,570 --> 00:05:35,020 And where the margin is then set to zero 120 00:05:35,020 --> 00:05:37,810 and padding is set to zero so that all these 121 00:05:37,810 --> 00:05:40,080 browser defaults are overwritten. 122 00:05:40,080 --> 00:05:42,480 Again, thanks to specificity, 123 00:05:42,480 --> 00:05:45,453 this rule will win over the browser defaults. 124 00:05:47,240 --> 00:05:49,510 And actually I don't just want to target 125 00:05:49,510 --> 00:05:50,900 the unordered lists, 126 00:05:50,900 --> 00:05:53,070 but also the ordered lists I might add. 127 00:05:53,070 --> 00:05:55,770 And therefore you learned that we can combine 128 00:05:55,770 --> 00:05:58,900 multiple selectors for one of the same rule, 129 00:05:58,900 --> 00:06:01,280 by adding a comma between them. 130 00:06:01,280 --> 00:06:03,170 This can be written in one line 131 00:06:03,170 --> 00:06:08,170 or seen very often split across multiple lines, both works. 132 00:06:08,910 --> 00:06:12,060 And this then ensures that the styles set up here 133 00:06:12,060 --> 00:06:14,120 are applied to all the unordered lists 134 00:06:14,120 --> 00:06:16,210 and all the ordered lists. 135 00:06:16,210 --> 00:06:17,360 So the different selectors 136 00:06:17,360 --> 00:06:19,483 are separated by commas here then. 137 00:06:21,630 --> 00:06:23,357 I also want to set up some general styles 138 00:06:23,357 --> 00:06:25,530 for anchor elements 139 00:06:25,530 --> 00:06:28,000 because there I wanna get rid of the text decoration 140 00:06:28,000 --> 00:06:31,140 and set this to none to remove the underlining. 141 00:06:31,140 --> 00:06:33,210 And I'll give it a default color, 142 00:06:33,210 --> 00:06:36,090 which we will override in a couple of places, 143 00:06:36,090 --> 00:06:38,560 but I wanna set up a general color, 144 00:06:38,560 --> 00:06:42,483 which is my color-primary-400 color, 145 00:06:43,550 --> 00:06:45,790 one of the variables I defined. 146 00:06:45,790 --> 00:06:47,320 And with those changes made, 147 00:06:47,320 --> 00:06:48,910 this link down here for example, 148 00:06:48,910 --> 00:06:52,200 now has this orange color and so does my logo. 149 00:06:52,200 --> 00:06:55,363 Though we'll revisit the logo throughout the discourse. 150 00:06:56,320 --> 00:06:58,280 But these are some general base styles 151 00:06:58,280 --> 00:06:59,683 of which I want to have. 152 00:07:01,060 --> 00:07:02,770 Now last but not least, 153 00:07:02,770 --> 00:07:05,710 before we leave the styling part for the moment, 154 00:07:05,710 --> 00:07:09,570 I also want to change the look of this button, 155 00:07:09,570 --> 00:07:11,720 of the Create Account button. 156 00:07:11,720 --> 00:07:14,150 And for this, it is worth remembering, 157 00:07:14,150 --> 00:07:17,240 if we have a look at signup.ejs, 158 00:07:17,240 --> 00:07:22,163 that this button here actually has a class of BTN. 159 00:07:23,250 --> 00:07:26,450 Now this means that we can set this class here 160 00:07:26,450 --> 00:07:30,150 and to find a styles for the button by targeting this class. 161 00:07:30,150 --> 00:07:32,860 And I'm using a class instead of an ID 162 00:07:32,860 --> 00:07:35,220 or the type selector deliberately 163 00:07:35,220 --> 00:07:38,510 because I want to be able to add this class 164 00:07:38,510 --> 00:07:41,800 to multiple elements on this overall website. 165 00:07:41,800 --> 00:07:45,380 And I also don't just plan to target button elements, 166 00:07:45,380 --> 00:07:49,163 but also some anchor elements throughout this website. 167 00:07:50,550 --> 00:07:53,260 That's why neither the button type selector 168 00:07:53,260 --> 00:07:54,490 would do the trick, 169 00:07:54,490 --> 00:07:57,740 that would leave out all the anchor elements, 170 00:07:57,740 --> 00:08:00,300 nor the ID selector does the trick 171 00:08:00,300 --> 00:08:02,220 because IDs should only be used 172 00:08:02,220 --> 00:08:04,360 if we have one exact element. 173 00:08:04,360 --> 00:08:06,380 IDs should be unique. 174 00:08:06,380 --> 00:08:08,970 That's why I'm opting for a class here. 175 00:08:08,970 --> 00:08:13,570 And that of course then simply means that in base.css, 176 00:08:13,570 --> 00:08:17,540 after defining all these base styles with tag selectors, 177 00:08:17,540 --> 00:08:21,650 I target a class to be precise to BTN class. 178 00:08:21,650 --> 00:08:22,940 And you'll learn in this course 179 00:08:22,940 --> 00:08:25,630 that you do this with dot and then the class name, 180 00:08:25,630 --> 00:08:28,743 that's the CSS selector for targeting a class. 181 00:08:30,070 --> 00:08:32,700 And in here, we can now set up any styles we want. 182 00:08:32,700 --> 00:08:35,200 For example, I'll set cursor to pointer 183 00:08:35,200 --> 00:08:37,360 to ensure that when we hover over the button, 184 00:08:37,360 --> 00:08:40,750 we always got this pointer mouse cursor. 185 00:08:40,750 --> 00:08:42,400 I'll set font to inherit 186 00:08:42,400 --> 00:08:45,890 because by default buttons bring their own fonts. 187 00:08:45,890 --> 00:08:49,190 And I want to force inheritance instead so that 188 00:08:49,190 --> 00:08:53,930 the font family set up in my HTML element is inherited, 189 00:08:53,930 --> 00:08:57,950 the browser defaults targeting buttons do not inherit, 190 00:08:57,950 --> 00:08:59,936 and they have a higher specificity 191 00:08:59,936 --> 00:09:01,750 than the built-in inheritance. 192 00:09:01,750 --> 00:09:03,890 So to force inheritance, 193 00:09:03,890 --> 00:09:06,620 I can set the font to inherit here 194 00:09:06,620 --> 00:09:09,820 with this special inherit value. 195 00:09:09,820 --> 00:09:12,772 This ensures that my buttons or all the elements with the 196 00:09:12,772 --> 00:09:16,743 BTN class get the main font of this page. 197 00:09:19,110 --> 00:09:21,140 Now I also want to set up some padding 198 00:09:21,140 --> 00:09:23,650 so that we have some space to top and bottom 199 00:09:23,650 --> 00:09:24,900 and left and right. 200 00:09:24,900 --> 00:09:29,363 And to top and bottom I'll use space-2, which was .5rem. 201 00:09:30,630 --> 00:09:31,860 And to left and right, 202 00:09:31,860 --> 00:09:35,020 I'll use more space and go for a space-6, 203 00:09:35,020 --> 00:09:35,853 which was 1.5. 204 00:09:37,590 --> 00:09:41,210 And here I'm using these variables so that if I ever would 205 00:09:41,210 --> 00:09:44,540 want to change the overall layout of my page, 206 00:09:44,540 --> 00:09:48,090 I could do it in one place where the variables are defined 207 00:09:48,090 --> 00:09:51,280 instead of visiting all the different CSS rules 208 00:09:51,280 --> 00:09:53,890 where I am using these spaces. 209 00:09:53,890 --> 00:09:56,433 That's the advantage of using such variables. 210 00:09:58,180 --> 00:10:00,480 Now, I also want to add some colors, 211 00:10:00,480 --> 00:10:02,200 for example, a background color. 212 00:10:02,200 --> 00:10:07,200 And the background color here should be the primary color, 213 00:10:07,500 --> 00:10:10,240 so the 500 shade to be precise, 214 00:10:10,240 --> 00:10:11,720 and the text color, 215 00:10:11,720 --> 00:10:14,290 set with the color property as you learned, 216 00:10:14,290 --> 00:10:18,837 that should be color-primary-500-contrast, 217 00:10:20,600 --> 00:10:22,670 which is a specific variable I defined 218 00:10:22,670 --> 00:10:25,640 for this main color here, 219 00:10:25,640 --> 00:10:27,330 which is a good contrast color, 220 00:10:27,330 --> 00:10:29,463 which is white in this case here. 221 00:10:30,380 --> 00:10:33,320 We could also go for primary-100, 222 00:10:33,320 --> 00:10:36,240 which would be a very light shade of the primary color 223 00:10:36,240 --> 00:10:38,270 that will probably also work, 224 00:10:38,270 --> 00:10:41,320 but here I went for a dedicated contrast color 225 00:10:41,320 --> 00:10:43,100 that was defined, 226 00:10:43,100 --> 00:10:45,363 but both approaches would be viable. 227 00:10:46,460 --> 00:10:48,530 Next I also want to add a border 228 00:10:48,530 --> 00:10:51,490 and I'll give it a size or a width of one pixel. 229 00:10:51,490 --> 00:10:53,880 And I'm going for pixels instead of REM here, 230 00:10:53,880 --> 00:10:57,100 because I don't want to ramp up my border size 231 00:10:57,100 --> 00:10:59,260 just because the font size increased. 232 00:10:59,260 --> 00:11:01,890 I don't wanna have super fat borders 233 00:11:01,890 --> 00:11:04,400 just because the font size was changed. 234 00:11:04,400 --> 00:11:06,580 So I'll go for pixels here. 235 00:11:06,580 --> 00:11:09,620 And then a solid color border. 236 00:11:09,620 --> 00:11:12,420 So no dashes or anything like this. 237 00:11:12,420 --> 00:11:14,200 And then for the border color, 238 00:11:14,200 --> 00:11:15,680 I will again use a variable 239 00:11:15,680 --> 00:11:19,023 and I will again use the 500 primary color here. 240 00:11:20,900 --> 00:11:22,530 Then as a last step, 241 00:11:22,530 --> 00:11:27,220 I wanna add a border radius here to have rounded corners. 242 00:11:27,220 --> 00:11:31,900 And there I will use border-radius-small. 243 00:11:31,900 --> 00:11:34,683 This specific variable I predefined. 244 00:11:35,990 --> 00:11:38,103 So these are my BTN styles now. 245 00:11:39,800 --> 00:11:41,930 Of course, I also wanna have specific styles 246 00:11:41,930 --> 00:11:43,780 if we hover over a button 247 00:11:43,780 --> 00:11:47,290 or we are currently clicking or tapping on a button 248 00:11:47,290 --> 00:11:50,630 and that can be achieved with those pseudo-classes, 249 00:11:50,630 --> 00:11:53,123 those pseudo-selectors you learned about. 250 00:11:54,090 --> 00:11:57,790 You can add such a pseudo-selector or class with a colon 251 00:11:57,790 --> 00:12:00,820 and then the name of that pseudo class or selector. 252 00:12:00,820 --> 00:12:01,680 And in this case, 253 00:12:01,680 --> 00:12:04,070 I wanna add the hover pseudo-selector 254 00:12:04,070 --> 00:12:07,280 and then the active pseudo-selector. 255 00:12:07,280 --> 00:12:08,210 And again, here, 256 00:12:08,210 --> 00:12:12,970 I'm grouping two selectors into one of the same CSS rule, 257 00:12:12,970 --> 00:12:15,010 because I want to apply the same styles 258 00:12:15,010 --> 00:12:17,420 for these two different selectors, 259 00:12:17,420 --> 00:12:20,810 for the hover and the active selector. 260 00:12:20,810 --> 00:12:22,780 Active will kick in if the user 261 00:12:22,780 --> 00:12:24,550 is currently pressing the button, 262 00:12:24,550 --> 00:12:28,290 hover already kicks in if you're hovering over the button, 263 00:12:28,290 --> 00:12:31,123 which of course is not possible on mobile devices. 264 00:12:32,510 --> 00:12:35,150 And then here the styles I do want to apply 265 00:12:35,150 --> 00:12:37,150 are background color 266 00:12:37,150 --> 00:12:38,400 var(--color-primary-700). 267 00:12:41,960 --> 00:12:44,370 So a darker, main color. 268 00:12:44,370 --> 00:12:46,980 And I also wanna change the border color 269 00:12:46,980 --> 00:12:49,840 to that same darker color. 270 00:12:49,840 --> 00:12:50,773 And that is it. 271 00:12:52,530 --> 00:12:54,110 Now throughout this course, 272 00:12:54,110 --> 00:12:56,780 I'll define more base styles, 273 00:12:56,780 --> 00:12:59,840 more button alternative styles, and so on, 274 00:12:59,840 --> 00:13:02,000 which we will need from time to time. 275 00:13:02,000 --> 00:13:04,460 But for the moment we got everything we need. 276 00:13:04,460 --> 00:13:06,360 If we now save this 277 00:13:06,360 --> 00:13:07,970 and I fixed this error 278 00:13:07,970 --> 00:13:12,090 where I have an incorrect background color variable name, 279 00:13:12,090 --> 00:13:14,190 but if I now save this and I reload, 280 00:13:14,190 --> 00:13:16,310 now I got this button look here. 281 00:13:16,310 --> 00:13:19,580 And now I would say we're ready to move on to 282 00:13:19,580 --> 00:13:22,250 styling this form before we then finally 283 00:13:22,250 --> 00:13:24,670 also add all the authentication logic 284 00:13:24,670 --> 00:13:26,853 which we want to have for this website.