In this video we're going to wrap up our introductory section to web servers by adding some styles to
our application.
So right now it is mostly unskilled and it's not looking so great.
By the end we'll have a much nicer looking styled version of the app now to kick things off.
I want to close all open editors and collapse all expanded directories.
We're still working with the contents of the web server but I want to start from a nice clean slate
without having a dozen different files open to kick things off.
We're going to focus on two files.
We're going to focus on these styles file in public forward slash C Ss that is styles dot C Ss and we're
going to focus on one of our views.
So in the views folder we can grab a file like index dot HP s.
The goal is to write some styles that's going to make this page look better than the same styles will
get used throughout all of our handlebars templates creating a nice unified feel for the site.
Now if we are going to start by styling this home page let's go ahead and actually pull that one up
in the browser.
This is the weather page.
Now we're ready to actually make this site look a little nicer since this is primarily a back end.
Course we're not going to spend a ton of time focusing on CSX.
So if you're interested in actually learning about CSX and how it works and all of the different ways
it can be used there are plenty of great Udemy courses on the topic.
The goal in this video is for me to just give you some basic styles that's gonna make the application
look a bit nicer but the stuff we're actually going to learn about pertains to node servers and the
back end.
With that said let's add a few styles into the app to get started.
We're going to add some styles for the body element that's going to allow us to setup some global styles
for our funds and it's also going to allow us to center our site content.
Let's go ahead and kick things off in styles dot SS by completely wiping everything we have.
So far all seven lines we're going to end up writing maybe 40 or so lines in this file in this video
and we're going to kick things off by selecting the body and setting up our curly braces.
Now we'll end up putting a few different properties inside of here to start though.
Let's focus on some font related items.
We're going to start with color now when we set color on the body.
We're setting the color for the entire site not just for a single piece of text to show you what I mean.
Let's go ahead and set color to read it temporarily.
That's not the value we're going to use in the long run.
But if I refresh the page I can see that I now have a red header and a red paragraph in the footer.
Now you'll notice that the text links those are not showing up in red.
That's because anchor tags have their own custom colors.
They are blue by default and purple when they've been navigated too though don't worry we'll learn how
to style the colors for those as well.
A bit later in the video now we're not going to use red.
Instead we're going to provide a hex code a hex color code that starts with the hash sign which is shift
3 followed by our hex code which in this case is going to be the number three six times one two three
four five six.
Now if you're not familiar with hex codes it's just a way to represent a color and if you're using design
tools like sketch or photoshop you're going to end up working with colors in this hex format and then
you can translate them from that design tool over to your style sheets.
In this case though I'm providing the hex code for you.
Now this particular hex code is still a pretty dark gray.
So it's going to look kind of like what we had before.
But a little nicer if I refresh the browser.
What do we get.
We can see that it's not quite black but it's definitely pretty close.
So now that we have that in place let's go ahead and customize the font family that is the actual styles
to the individual characters font family is going to allow us to get that done and we're going to start
with a very simple font available on most machines which is just aerial.
This is a nice sans serif font which is going to get rid of those little syrups on the individual characters.
If I go ahead and refresh things we can see we now have a nice clean look from here.
We're gonna go ahead and continue to add some styles to body.
The goal is going to be to center our content so it's not pushed right up against the left hand side.
Now to do that we're going to end up setting a few different properties.
Let's go ahead and start with one that is Max hyphen with max width allows us to set a max with for
the site so I can use a value like six hundred and fifty pixels as an example 650 P X and this is going
to constrain how wide our content can be.
Now if we refresh the browser we're going to notice there's zero change even though behind the scenes
something has changed instead of our content taking up the whole with it now stops right about here.
The goal is to take this block from here to here and center it.
So it goes from about here to about here.
We can do that with a couple properties down below what we're gonna do is set up margin.
So margin is one of two spacing properties will end up using to style or applications.
And in this case we're going to use it to evenly distribute space on the left and the right of the body.
So all of that content shows up in the center.
Now to get that done we provided two values here zero space auto followed by a semicolon.
So zero is the margin value we're applying to the top and the bottom.
I'm not trying to add any additional space above or below the content so we're going to leave that as
zero an auto is going to evenly distribute the space on the left and the right.
So the first value is the margin value for a top and bottom.
The second value is the margin value for left and right.
Now if we go ahead and save the content we are going to notice a difference.
It is now centered.
So we have a block going from about here to about here.
And it's showing up in the center of the browser.
Now if I was to make the browser window smaller we'll see that our content adjusts correctly.
The only problem is that it's jammed up against the left hand sidebar.
We can address that with a another sizing property down below.
We're going to go ahead and set up padding.
We are going to define two values like we did for margin.
The first is going to be zero.
I'm not trying to add any additional space above or below.
And the second is going to be a value like 16 pixels.
So in this case we're putting 16 pixels between our body content and the side of the browser window
that's going to prevent things from getting jammed up against the edge of it.
And if I refresh the browser what do we get.
I can see there's now a little more breathing room making the site look a little nicer.
Now let's bring that browser window back to its full width and we'll go ahead and continue styling our
site.
The next thing we're going to style is the footer and there's a reason that I'm diving into the footer
before diving into the header.
Now the footer markup that lives in footer.
HB Yes.
And over here we are going to make a small change before adding any styles H2 UML provides us with a
footer element which we can use to house our footer content.
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
to move it right inside.
This is going to allow us to easily expand the footer adding more content inside of there.
Now that we have our footer element set up let's go ahead and move into styles Don CSX and target it
down below.
We are targeting footer.
We are providing a list of style is we want to apply and to kick things off.
I want to talk about the differences between margin and padding if you're not familiar and the best
way to illustrate this is to give our footer a background color.
So right here background.
Let's go ahead and use something very obvious like blue.
Now we're not actually gonna keep this in place.
We're just going to use it to explore a new concept.
So right here we have our blue black round for the footer and you can see that all of the text is sitting
right inside.
Now we have two ways we can space things.
We have the margin and we have the padding the padding is going to put space inside of this box.
And the margin is going to put space outside of the box between the box and other items.
Let's check this out.
So to kick things off what I'm going to do is set up padding.
I'm going to set padding equal to a single value when we use just a single value.
It gets applied on all sides.
So in this case I'm going to use something like 16 pixels.
Now if we go ahead and refresh the page by adding padding we're putting space between the edges of the
box and the content inside.
So between the edge of the blue and our text if I refresh things that's exactly what we get.
We have a much bigger box.
Now the margin it's going to put space between these things outside of the box and the box itself.
That would allow us to put some space between this blue box and the header links above.
So right here let's go ahead and explore that.
That's gonna be margin and I will set the value equal to something like 16 pixels I'm then going to
go ahead and save the style sheet.
And now I can see we have space outside of the box on all sides.
So that's the difference between margin and padding and we'll end up using both throughout this course
and we're actually going to use both right inside of footer to start though.
Let's go ahead and wipe all three styles we set up and we're going to start by setting up color once
again in the footer text color is going to be a bit lighter than the rest of the content making it not
pop quite as much and for this we'll use another hex color code that is the number eight six times which
is a slightly lighter gray than what we had before.
Next up we're going to set up a border.
So we're gonna have a border at the top of the footer by setting border high thin top.
Now you have border life and left border hyphen right and border hyphen bottom for those other borders.
In this case though we don't want all four borders.
I just want a single one.
So we're only going to set up a single one right here.
We provide three values for the border.
It's with I'll use one pixel the type of border like dashed or solid I'll use solid and then the hex
color code.
We'd like to use.
I will be using a very light gray.
That is the letter E six times one two three four five six.
Before we go any further let's go ahead and save the style sheet refresh things in the browser.
And now we can see we do indeed have our border and we do indeed have our lighter text color from here.
Let's go ahead and set up a bit of spacing using padding and margin.
I'm going to start off with margin and we're only going to set the top margin that is going to be space
between the box which in this case ends with the border.
And what's above it which in this case is the NAV items.
Now we could use margin but there's also shorthand for margin top left bottom and right.
So right here I'll just set margin top since that's the only value I actually want to configure and
I'll use 16 pixels for that.
Next up I'm also going to set up the padding.
So I'm going to have a little bit of padding inside of there.
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
the right.
Now with this in place let's go ahead and refresh our styles to see what we get.
In there we go.
We have a nice styled footer now.
Currently it's still pushed up near the top of the page a bit later.
We'll learn how to make that stick near the bottom where you'd expect the footer to live.
But now that we have the footer styled for the most part we're going to focus on the header.
Now the mark up for the header that lives in a different file that is in header dot HB Yes.
So let's take a moment to crack that open and make a couple of small modifications HDMI l provides us
with a header element that we can use to house our header content and that's what we're gonna use.
I'm going to remove the div in our current tag and swap it out with header and I'll do the same thing
in the closing tag down below and we're gonna do from here is take the H1 and put it right inside so
I'll cut the H1 out down below I'll add it right in and there we go.
This is the final structure.
We're going to end up using for the header now by default.
This isn't going to change the look of the site at all.
But now we can actually target everything with C Ss and customize the look and feel to get started over
in styles dot C Ss.
I'm going to setup a style targeting header and we are going to provide just the margin.
So the goal here is to add a little space between the header and the content below and between the header
and the top of the browser window up above.
So we want to set margin top and margin bottom.
I can do that using margin hyphen top.
I'll use a value of 16 pixels for that.
Then I can also set margin I thin bottom using a bigger value.
Let's go ahead and use something like forty eight pixels not forty seven.
That was a typo.
Perfect.
Now we have a nice set of styles provided.
And if I refresh things we have just a bit more space surrounding our content.
Next up we are going to target our header that is the H one element and we are going to make the font
much bigger.
And we're gonna give it a bit more spacing.
So right here I am going to set up font size to customize how big the font is.
And in this case we're going to use something much bigger like 64 pixels.
I'll also set up margin hyphen bottom to but to put some spacing down below.
Perfect.
I'm going to save the file.
Give things a refresh.
And now we can see our headers really starting to come together.
The next thing we want to style are the navigation items.
So we have our three links in here we want to customize these styles for each.
Now there are a few different ways we can style our links.
One approach would be to just head into styles Don CSX target the a element and then set up our styles.
Now the problem with this is that if we have links anywhere else in our site like somewhere as the help
page content they're going to take on the exact same style as our NAV items which is likely not what
we want.
So we're going to go ahead and customize things just a little bit.
What I'm going to go ahead and do is target using the following selector.
So I'm targeting header then inside of there.
That's what the space does.
I'm looking for any links.
So here we are just targeting our links inside of the header.
And now we can target those specifically without changing links throughout the entire site right here.
Let's go ahead and add a couple of styles for our navigation items.
First up we are going to change the color I will use the Hex Code 8 8 8 8 8 8.
Then we're going to set up a margin property margin hyphen right to put some space between all of these
items.
We can use something pretty small like 16 pixels.
And then lastly we want to remove that underline.
Well it's a stylistic choice and I'm choosing to do that and we do that using text hyphen decoration.
You can set text decoration equal to underline to underline pretty much anything you'd like.
But in this case we don't want to set it to underline which is the default value for our links.
Instead we're going to set it to none which removes that underline.
So now we should see links in a lighter color with a bit of space between them without the underline
showing.
And if I refresh things that is exactly what we get.
Now these sites are really starting to come together.
I can navigate between the pages and I can see that my header and footer styles come with me.
So now that we have the header and footer styled that's where we're gonna stop for this one.
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
break it into two parts in the next video.
We'll finish this little bonus on styling the application and we'll finally wrap up the section.
I'll see you next time.