1 00:00:00,330 --> 00:00:06,270 In this video we're going to wrap up our introductory section to web servers by adding some styles to 2 00:00:06,270 --> 00:00:07,470 our application. 3 00:00:07,500 --> 00:00:11,520 So right now it is mostly unskilled and it's not looking so great. 4 00:00:11,520 --> 00:00:17,160 By the end we'll have a much nicer looking styled version of the app now to kick things off. 5 00:00:17,160 --> 00:00:22,300 I want to close all open editors and collapse all expanded directories. 6 00:00:22,350 --> 00:00:27,210 We're still working with the contents of the web server but I want to start from a nice clean slate 7 00:00:27,210 --> 00:00:31,020 without having a dozen different files open to kick things off. 8 00:00:31,020 --> 00:00:33,280 We're going to focus on two files. 9 00:00:33,360 --> 00:00:41,400 We're going to focus on these styles file in public forward slash C Ss that is styles dot C Ss and we're 10 00:00:41,400 --> 00:00:43,650 going to focus on one of our views. 11 00:00:43,710 --> 00:00:48,770 So in the views folder we can grab a file like index dot HP s. 12 00:00:48,810 --> 00:00:54,750 The goal is to write some styles that's going to make this page look better than the same styles will 13 00:00:54,750 --> 00:01:01,430 get used throughout all of our handlebars templates creating a nice unified feel for the site. 14 00:01:01,440 --> 00:01:06,450 Now if we are going to start by styling this home page let's go ahead and actually pull that one up 15 00:01:06,450 --> 00:01:07,580 in the browser. 16 00:01:07,590 --> 00:01:09,420 This is the weather page. 17 00:01:09,420 --> 00:01:14,740 Now we're ready to actually make this site look a little nicer since this is primarily a back end. 18 00:01:14,740 --> 00:01:18,480 Course we're not going to spend a ton of time focusing on CSX. 19 00:01:18,480 --> 00:01:23,910 So if you're interested in actually learning about CSX and how it works and all of the different ways 20 00:01:23,910 --> 00:01:28,290 it can be used there are plenty of great Udemy courses on the topic. 21 00:01:28,290 --> 00:01:33,750 The goal in this video is for me to just give you some basic styles that's gonna make the application 22 00:01:33,750 --> 00:01:39,510 look a bit nicer but the stuff we're actually going to learn about pertains to node servers and the 23 00:01:39,510 --> 00:01:40,580 back end. 24 00:01:40,590 --> 00:01:44,340 With that said let's add a few styles into the app to get started. 25 00:01:44,340 --> 00:01:50,070 We're going to add some styles for the body element that's going to allow us to setup some global styles 26 00:01:50,070 --> 00:01:55,300 for our funds and it's also going to allow us to center our site content. 27 00:01:55,320 --> 00:02:01,010 Let's go ahead and kick things off in styles dot SS by completely wiping everything we have. 28 00:02:01,010 --> 00:02:08,820 So far all seven lines we're going to end up writing maybe 40 or so lines in this file in this video 29 00:02:09,090 --> 00:02:14,400 and we're going to kick things off by selecting the body and setting up our curly braces. 30 00:02:14,410 --> 00:02:18,810 Now we'll end up putting a few different properties inside of here to start though. 31 00:02:18,810 --> 00:02:22,140 Let's focus on some font related items. 32 00:02:22,140 --> 00:02:26,580 We're going to start with color now when we set color on the body. 33 00:02:26,610 --> 00:02:32,790 We're setting the color for the entire site not just for a single piece of text to show you what I mean. 34 00:02:32,790 --> 00:02:35,850 Let's go ahead and set color to read it temporarily. 35 00:02:35,850 --> 00:02:38,410 That's not the value we're going to use in the long run. 36 00:02:38,490 --> 00:02:45,060 But if I refresh the page I can see that I now have a red header and a red paragraph in the footer. 37 00:02:45,060 --> 00:02:49,010 Now you'll notice that the text links those are not showing up in red. 38 00:02:49,020 --> 00:02:52,620 That's because anchor tags have their own custom colors. 39 00:02:52,680 --> 00:02:57,960 They are blue by default and purple when they've been navigated too though don't worry we'll learn how 40 00:02:57,960 --> 00:03:00,630 to style the colors for those as well. 41 00:03:00,630 --> 00:03:04,050 A bit later in the video now we're not going to use red. 42 00:03:04,050 --> 00:03:11,010 Instead we're going to provide a hex code a hex color code that starts with the hash sign which is shift 43 00:03:11,040 --> 00:03:18,510 3 followed by our hex code which in this case is going to be the number three six times one two three 44 00:03:18,780 --> 00:03:20,790 four five six. 45 00:03:20,790 --> 00:03:26,700 Now if you're not familiar with hex codes it's just a way to represent a color and if you're using design 46 00:03:26,700 --> 00:03:32,880 tools like sketch or photoshop you're going to end up working with colors in this hex format and then 47 00:03:32,880 --> 00:03:37,710 you can translate them from that design tool over to your style sheets. 48 00:03:37,710 --> 00:03:41,110 In this case though I'm providing the hex code for you. 49 00:03:41,280 --> 00:03:45,180 Now this particular hex code is still a pretty dark gray. 50 00:03:45,390 --> 00:03:47,760 So it's going to look kind of like what we had before. 51 00:03:47,790 --> 00:03:50,460 But a little nicer if I refresh the browser. 52 00:03:50,490 --> 00:03:51,250 What do we get. 53 00:03:51,300 --> 00:03:55,650 We can see that it's not quite black but it's definitely pretty close. 54 00:03:55,650 --> 00:04:02,040 So now that we have that in place let's go ahead and customize the font family that is the actual styles 55 00:04:02,190 --> 00:04:08,760 to the individual characters font family is going to allow us to get that done and we're going to start 56 00:04:08,760 --> 00:04:13,940 with a very simple font available on most machines which is just aerial. 57 00:04:13,950 --> 00:04:20,740 This is a nice sans serif font which is going to get rid of those little syrups on the individual characters. 58 00:04:20,820 --> 00:04:26,640 If I go ahead and refresh things we can see we now have a nice clean look from here. 59 00:04:26,640 --> 00:04:30,030 We're gonna go ahead and continue to add some styles to body. 60 00:04:30,030 --> 00:04:36,530 The goal is going to be to center our content so it's not pushed right up against the left hand side. 61 00:04:36,600 --> 00:04:40,740 Now to do that we're going to end up setting a few different properties. 62 00:04:40,740 --> 00:04:49,000 Let's go ahead and start with one that is Max hyphen with max width allows us to set a max with for 63 00:04:49,020 --> 00:04:57,210 the site so I can use a value like six hundred and fifty pixels as an example 650 P X and this is going 64 00:04:57,210 --> 00:05:00,560 to constrain how wide our content can be. 65 00:05:00,580 --> 00:05:05,860 Now if we refresh the browser we're going to notice there's zero change even though behind the scenes 66 00:05:05,890 --> 00:05:12,580 something has changed instead of our content taking up the whole with it now stops right about here. 67 00:05:12,580 --> 00:05:16,270 The goal is to take this block from here to here and center it. 68 00:05:16,300 --> 00:05:19,460 So it goes from about here to about here. 69 00:05:19,750 --> 00:05:25,630 We can do that with a couple properties down below what we're gonna do is set up margin. 70 00:05:25,630 --> 00:05:31,030 So margin is one of two spacing properties will end up using to style or applications. 71 00:05:31,030 --> 00:05:38,020 And in this case we're going to use it to evenly distribute space on the left and the right of the body. 72 00:05:38,020 --> 00:05:41,140 So all of that content shows up in the center. 73 00:05:41,140 --> 00:05:48,100 Now to get that done we provided two values here zero space auto followed by a semicolon. 74 00:05:48,220 --> 00:05:52,550 So zero is the margin value we're applying to the top and the bottom. 75 00:05:52,570 --> 00:05:58,360 I'm not trying to add any additional space above or below the content so we're going to leave that as 76 00:05:58,360 --> 00:06:03,990 zero an auto is going to evenly distribute the space on the left and the right. 77 00:06:04,030 --> 00:06:07,390 So the first value is the margin value for a top and bottom. 78 00:06:07,450 --> 00:06:11,120 The second value is the margin value for left and right. 79 00:06:11,290 --> 00:06:14,830 Now if we go ahead and save the content we are going to notice a difference. 80 00:06:14,830 --> 00:06:16,260 It is now centered. 81 00:06:16,330 --> 00:06:19,540 So we have a block going from about here to about here. 82 00:06:19,540 --> 00:06:22,510 And it's showing up in the center of the browser. 83 00:06:22,510 --> 00:06:27,910 Now if I was to make the browser window smaller we'll see that our content adjusts correctly. 84 00:06:27,910 --> 00:06:31,930 The only problem is that it's jammed up against the left hand sidebar. 85 00:06:32,020 --> 00:06:36,190 We can address that with a another sizing property down below. 86 00:06:36,190 --> 00:06:38,710 We're going to go ahead and set up padding. 87 00:06:38,830 --> 00:06:42,800 We are going to define two values like we did for margin. 88 00:06:42,850 --> 00:06:44,760 The first is going to be zero. 89 00:06:44,770 --> 00:06:48,950 I'm not trying to add any additional space above or below. 90 00:06:49,030 --> 00:06:52,550 And the second is going to be a value like 16 pixels. 91 00:06:52,570 --> 00:06:58,990 So in this case we're putting 16 pixels between our body content and the side of the browser window 92 00:06:59,260 --> 00:07:02,690 that's going to prevent things from getting jammed up against the edge of it. 93 00:07:02,710 --> 00:07:05,170 And if I refresh the browser what do we get. 94 00:07:05,200 --> 00:07:09,910 I can see there's now a little more breathing room making the site look a little nicer. 95 00:07:09,910 --> 00:07:15,850 Now let's bring that browser window back to its full width and we'll go ahead and continue styling our 96 00:07:15,850 --> 00:07:16,340 site. 97 00:07:16,390 --> 00:07:21,030 The next thing we're going to style is the footer and there's a reason that I'm diving into the footer 98 00:07:21,040 --> 00:07:23,310 before diving into the header. 99 00:07:23,320 --> 00:07:25,980 Now the footer markup that lives in footer. 100 00:07:26,110 --> 00:07:26,850 HB Yes. 101 00:07:26,860 --> 00:07:33,610 And over here we are going to make a small change before adding any styles H2 UML provides us with a 102 00:07:33,640 --> 00:07:37,810 footer element which we can use to house our footer content. 103 00:07:37,810 --> 00:07:44,290 So right here I'm going to set up footer and all I'm going to do is take our paragraph and I'm going 104 00:07:44,290 --> 00:07:46,150 to move it right inside. 105 00:07:46,150 --> 00:07:51,130 This is going to allow us to easily expand the footer adding more content inside of there. 106 00:07:51,130 --> 00:07:57,430 Now that we have our footer element set up let's go ahead and move into styles Don CSX and target it 107 00:07:57,820 --> 00:07:58,870 down below. 108 00:07:58,870 --> 00:08:00,550 We are targeting footer. 109 00:08:00,550 --> 00:08:04,830 We are providing a list of style is we want to apply and to kick things off. 110 00:08:04,840 --> 00:08:09,850 I want to talk about the differences between margin and padding if you're not familiar and the best 111 00:08:09,850 --> 00:08:13,590 way to illustrate this is to give our footer a background color. 112 00:08:13,600 --> 00:08:16,250 So right here background. 113 00:08:16,320 --> 00:08:19,680 Let's go ahead and use something very obvious like blue. 114 00:08:19,680 --> 00:08:22,200 Now we're not actually gonna keep this in place. 115 00:08:22,200 --> 00:08:25,860 We're just going to use it to explore a new concept. 116 00:08:25,860 --> 00:08:30,900 So right here we have our blue black round for the footer and you can see that all of the text is sitting 117 00:08:30,930 --> 00:08:32,180 right inside. 118 00:08:32,190 --> 00:08:34,310 Now we have two ways we can space things. 119 00:08:34,310 --> 00:08:40,610 We have the margin and we have the padding the padding is going to put space inside of this box. 120 00:08:40,740 --> 00:08:46,500 And the margin is going to put space outside of the box between the box and other items. 121 00:08:46,500 --> 00:08:47,400 Let's check this out. 122 00:08:47,970 --> 00:08:51,410 So to kick things off what I'm going to do is set up padding. 123 00:08:51,660 --> 00:08:57,130 I'm going to set padding equal to a single value when we use just a single value. 124 00:08:57,150 --> 00:08:59,320 It gets applied on all sides. 125 00:08:59,340 --> 00:09:03,240 So in this case I'm going to use something like 16 pixels. 126 00:09:03,240 --> 00:09:08,580 Now if we go ahead and refresh the page by adding padding we're putting space between the edges of the 127 00:09:08,580 --> 00:09:10,790 box and the content inside. 128 00:09:10,800 --> 00:09:16,280 So between the edge of the blue and our text if I refresh things that's exactly what we get. 129 00:09:16,290 --> 00:09:18,780 We have a much bigger box. 130 00:09:18,780 --> 00:09:24,790 Now the margin it's going to put space between these things outside of the box and the box itself. 131 00:09:24,900 --> 00:09:30,830 That would allow us to put some space between this blue box and the header links above. 132 00:09:30,840 --> 00:09:33,660 So right here let's go ahead and explore that. 133 00:09:33,780 --> 00:09:41,010 That's gonna be margin and I will set the value equal to something like 16 pixels I'm then going to 134 00:09:41,010 --> 00:09:43,090 go ahead and save the style sheet. 135 00:09:43,170 --> 00:09:47,520 And now I can see we have space outside of the box on all sides. 136 00:09:47,520 --> 00:09:52,890 So that's the difference between margin and padding and we'll end up using both throughout this course 137 00:09:53,130 --> 00:09:57,300 and we're actually going to use both right inside of footer to start though. 138 00:09:57,330 --> 00:10:02,880 Let's go ahead and wipe all three styles we set up and we're going to start by setting up color once 139 00:10:02,880 --> 00:10:08,790 again in the footer text color is going to be a bit lighter than the rest of the content making it not 140 00:10:08,790 --> 00:10:15,600 pop quite as much and for this we'll use another hex color code that is the number eight six times which 141 00:10:15,600 --> 00:10:19,500 is a slightly lighter gray than what we had before. 142 00:10:19,500 --> 00:10:21,570 Next up we're going to set up a border. 143 00:10:21,750 --> 00:10:27,530 So we're gonna have a border at the top of the footer by setting border high thin top. 144 00:10:27,540 --> 00:10:33,650 Now you have border life and left border hyphen right and border hyphen bottom for those other borders. 145 00:10:33,720 --> 00:10:36,180 In this case though we don't want all four borders. 146 00:10:36,180 --> 00:10:37,900 I just want a single one. 147 00:10:37,920 --> 00:10:40,840 So we're only going to set up a single one right here. 148 00:10:40,860 --> 00:10:43,240 We provide three values for the border. 149 00:10:43,260 --> 00:10:51,360 It's with I'll use one pixel the type of border like dashed or solid I'll use solid and then the hex 150 00:10:51,390 --> 00:10:52,050 color code. 151 00:10:52,050 --> 00:10:53,250 We'd like to use. 152 00:10:53,340 --> 00:10:55,870 I will be using a very light gray. 153 00:10:55,890 --> 00:11:01,290 That is the letter E six times one two three four five six. 154 00:11:01,380 --> 00:11:06,780 Before we go any further let's go ahead and save the style sheet refresh things in the browser. 155 00:11:06,780 --> 00:11:13,080 And now we can see we do indeed have our border and we do indeed have our lighter text color from here. 156 00:11:13,110 --> 00:11:17,330 Let's go ahead and set up a bit of spacing using padding and margin. 157 00:11:17,370 --> 00:11:24,060 I'm going to start off with margin and we're only going to set the top margin that is going to be space 158 00:11:24,210 --> 00:11:27,560 between the box which in this case ends with the border. 159 00:11:27,690 --> 00:11:31,150 And what's above it which in this case is the NAV items. 160 00:11:31,170 --> 00:11:37,180 Now we could use margin but there's also shorthand for margin top left bottom and right. 161 00:11:37,200 --> 00:11:42,660 So right here I'll just set margin top since that's the only value I actually want to configure and 162 00:11:42,660 --> 00:11:45,220 I'll use 16 pixels for that. 163 00:11:45,240 --> 00:11:47,960 Next up I'm also going to set up the padding. 164 00:11:47,970 --> 00:11:50,850 So I'm going to have a little bit of padding inside of there. 165 00:11:50,880 --> 00:11:57,780 Right here I'm going to set up 16 pixels for the top and the bottom and I'll do zero for the left and 166 00:11:57,780 --> 00:11:58,830 the right. 167 00:11:58,860 --> 00:12:03,360 Now with this in place let's go ahead and refresh our styles to see what we get. 168 00:12:03,390 --> 00:12:04,410 In there we go. 169 00:12:04,440 --> 00:12:07,050 We have a nice styled footer now. 170 00:12:07,110 --> 00:12:10,890 Currently it's still pushed up near the top of the page a bit later. 171 00:12:10,890 --> 00:12:15,960 We'll learn how to make that stick near the bottom where you'd expect the footer to live. 172 00:12:15,960 --> 00:12:21,030 But now that we have the footer styled for the most part we're going to focus on the header. 173 00:12:21,060 --> 00:12:26,900 Now the mark up for the header that lives in a different file that is in header dot HB Yes. 174 00:12:26,940 --> 00:12:33,060 So let's take a moment to crack that open and make a couple of small modifications HDMI l provides us 175 00:12:33,060 --> 00:12:38,550 with a header element that we can use to house our header content and that's what we're gonna use. 176 00:12:38,550 --> 00:12:44,520 I'm going to remove the div in our current tag and swap it out with header and I'll do the same thing 177 00:12:44,520 --> 00:12:51,210 in the closing tag down below and we're gonna do from here is take the H1 and put it right inside so 178 00:12:51,240 --> 00:12:55,790 I'll cut the H1 out down below I'll add it right in and there we go. 179 00:12:55,800 --> 00:12:57,370 This is the final structure. 180 00:12:57,390 --> 00:13:00,540 We're going to end up using for the header now by default. 181 00:13:00,540 --> 00:13:03,190 This isn't going to change the look of the site at all. 182 00:13:03,240 --> 00:13:10,200 But now we can actually target everything with C Ss and customize the look and feel to get started over 183 00:13:10,200 --> 00:13:12,140 in styles dot C Ss. 184 00:13:12,160 --> 00:13:19,560 I'm going to setup a style targeting header and we are going to provide just the margin. 185 00:13:19,590 --> 00:13:25,110 So the goal here is to add a little space between the header and the content below and between the header 186 00:13:25,290 --> 00:13:28,530 and the top of the browser window up above. 187 00:13:28,530 --> 00:13:32,010 So we want to set margin top and margin bottom. 188 00:13:32,010 --> 00:13:35,200 I can do that using margin hyphen top. 189 00:13:35,430 --> 00:13:38,150 I'll use a value of 16 pixels for that. 190 00:13:38,280 --> 00:13:42,620 Then I can also set margin I thin bottom using a bigger value. 191 00:13:42,630 --> 00:13:46,560 Let's go ahead and use something like forty eight pixels not forty seven. 192 00:13:46,590 --> 00:13:47,610 That was a typo. 193 00:13:47,610 --> 00:13:48,650 Perfect. 194 00:13:48,660 --> 00:13:51,540 Now we have a nice set of styles provided. 195 00:13:51,540 --> 00:13:56,400 And if I refresh things we have just a bit more space surrounding our content. 196 00:13:56,400 --> 00:14:02,670 Next up we are going to target our header that is the H one element and we are going to make the font 197 00:14:02,700 --> 00:14:03,660 much bigger. 198 00:14:03,660 --> 00:14:05,270 And we're gonna give it a bit more spacing. 199 00:14:05,280 --> 00:14:12,180 So right here I am going to set up font size to customize how big the font is. 200 00:14:12,180 --> 00:14:16,860 And in this case we're going to use something much bigger like 64 pixels. 201 00:14:16,890 --> 00:14:22,350 I'll also set up margin hyphen bottom to but to put some spacing down below. 202 00:14:22,470 --> 00:14:23,270 Perfect. 203 00:14:23,460 --> 00:14:25,040 I'm going to save the file. 204 00:14:25,140 --> 00:14:26,380 Give things a refresh. 205 00:14:26,400 --> 00:14:30,060 And now we can see our headers really starting to come together. 206 00:14:30,090 --> 00:14:33,590 The next thing we want to style are the navigation items. 207 00:14:33,600 --> 00:14:39,030 So we have our three links in here we want to customize these styles for each. 208 00:14:39,030 --> 00:14:42,210 Now there are a few different ways we can style our links. 209 00:14:42,210 --> 00:14:49,880 One approach would be to just head into styles Don CSX target the a element and then set up our styles. 210 00:14:49,890 --> 00:14:55,200 Now the problem with this is that if we have links anywhere else in our site like somewhere as the help 211 00:14:55,200 --> 00:15:00,990 page content they're going to take on the exact same style as our NAV items which is likely not what 212 00:15:00,990 --> 00:15:01,900 we want. 213 00:15:01,920 --> 00:15:05,760 So we're going to go ahead and customize things just a little bit. 214 00:15:05,940 --> 00:15:11,930 What I'm going to go ahead and do is target using the following selector. 215 00:15:12,000 --> 00:15:14,940 So I'm targeting header then inside of there. 216 00:15:14,970 --> 00:15:16,410 That's what the space does. 217 00:15:16,500 --> 00:15:18,680 I'm looking for any links. 218 00:15:18,690 --> 00:15:23,550 So here we are just targeting our links inside of the header. 219 00:15:23,610 --> 00:15:29,910 And now we can target those specifically without changing links throughout the entire site right here. 220 00:15:29,910 --> 00:15:33,630 Let's go ahead and add a couple of styles for our navigation items. 221 00:15:33,630 --> 00:15:41,770 First up we are going to change the color I will use the Hex Code 8 8 8 8 8 8. 222 00:15:41,840 --> 00:15:48,950 Then we're going to set up a margin property margin hyphen right to put some space between all of these 223 00:15:48,950 --> 00:15:49,630 items. 224 00:15:49,730 --> 00:15:52,920 We can use something pretty small like 16 pixels. 225 00:15:53,000 --> 00:15:56,070 And then lastly we want to remove that underline. 226 00:15:56,110 --> 00:16:03,080 Well it's a stylistic choice and I'm choosing to do that and we do that using text hyphen decoration. 227 00:16:03,080 --> 00:16:08,750 You can set text decoration equal to underline to underline pretty much anything you'd like. 228 00:16:08,930 --> 00:16:13,960 But in this case we don't want to set it to underline which is the default value for our links. 229 00:16:13,970 --> 00:16:18,490 Instead we're going to set it to none which removes that underline. 230 00:16:19,010 --> 00:16:25,130 So now we should see links in a lighter color with a bit of space between them without the underline 231 00:16:25,190 --> 00:16:25,810 showing. 232 00:16:25,820 --> 00:16:28,740 And if I refresh things that is exactly what we get. 233 00:16:28,910 --> 00:16:31,440 Now these sites are really starting to come together. 234 00:16:31,460 --> 00:16:37,310 I can navigate between the pages and I can see that my header and footer styles come with me. 235 00:16:37,400 --> 00:16:42,170 So now that we have the header and footer styled that's where we're gonna stop for this one. 236 00:16:42,170 --> 00:16:46,700 There's a few more things we'll be adding but I don't want this video to get too long as I'm going to 237 00:16:46,700 --> 00:16:49,760 break it into two parts in the next video. 238 00:16:49,820 --> 00:16:55,370 We'll finish this little bonus on styling the application and we'll finally wrap up the section. 239 00:16:55,370 --> 00:16:56,350 I'll see you next time.