All right welcome back.
In this video we're going to work on the styling of our site right now.
It's definitely nowhere near what it's supposed to look like at the end.
So let's actually compare them side by side.
Here's ours over here.
So some of the big changes we need to make rounding the corners adding some spacing here up top.
Changing the styling of the buttons here.
So these buttons don't really look like buttons until you hover over them and we get a hover effect
our buttons are definitely hideous and we don't have any hover effect on them.
Also the position of them is a little bit wrong.
As you can see if i guess here I get text but if I were fresh that tech space is already taken up versus
on our version if I guess the text pushes everything away to the sides.
Also there's an animation here.
So when I click notice how they fade out slowly on ours when we click well if I click an incorrect one
it just immediately is removed.
So we want to add a transition to that.
Also we have the H-1 up here that needs some work on ours.
It needs to take up more space.
We need to change the background color.
We want to change the font.
We need to make sure that the span of our color is formatted correctly so it's on its own line and it's
a larger font.
Also we need to change the font for the entire body.
So these are all the same font.
And lastly you'll notice we have a little bit of space right here between the stripe and the end of
the body and in the solution version there is no space at all.
OK.
Let's get started by first tackling this H-1.
So we're going to go to my subline text and go to the H-1 and the first thing that will do is just align
things in the middle as you can see in the solution.
Things are aligned to center.
So all we need to do is add text align center and save and refresh.
Ok slight improvement.
Next up let's change the background color so the color is going to be still blue but you'll notice that
if I refresh the page right now it works just fine.
But if I refresh again and then I win the game or I click on new colors.
It goes back to black and that's because our javascript code is overwriting that we're setting it back
to this dark gray blackish color in our javascript.
We need to find the places where we're resetting it to this color which is 2 3 2 3 2 3.
Here we go.
We just want to change this to be still blue.
And that's also when I refresh it starts it's still blue.
I get new colors.
It stays as still blue.
OK.
So that's that.
Now let's get rid of all the black space on either side of our H-1.
So in our H-1 we're going to get rid of all margin margin zero on top and bottom left and right.
So notice what happens when to do that.
That black space goes away on all sides except for this little bit of spacing on the left top and right
.
And that's not coming from or H-1 that's actually coming from the body.
So to fix that we can go to the body and give it margin zero.
And to now pay attention to this little gap I'll refresh and that goes away.
So our white stripe goes all the way to the side just like it does in this version here.
OK.
Next up let's focus on the fun.
So the fun is going to be the same for all of our elements.
The buttons and the H-1 and the span here it's all the same font slightly different font weights.
And we're going to use just one of the built in fonts the system vaunts which is called Avenir.
So that's going to be font family Avenir.
That is a font that may not work on every system out there.
So we're going to add in a another option which is Mont. Serat just like that.
So we end up with this fun here which obviously doesn't look exactly the same.
And that comes down to our font weight.
So we need to change the weight of this font because it's an H1.
The default is to make it bolded or to have like 700 or 800 or even 900 font weight.
What we want to do is give it font weight normal.
So when our H-1 can add font weight normal and save.
Refresh.
That's looking closer.
Now there's a few other things we need to change.
The first of which is that this is all uppercase and we can do that with R C S S using text transform
uppercase and save So now look closer and will also want to make sure that our color is on its own line
and that we style that span slightly differently to do that.
We're going to go over here into our team and actually we're going to edit the aged him out a little
bit.
And this is the first way that we're going to make this work.
We'll see another way of doing it with Pearcey SS But we're going to start by styling this where we
have the great on one line and then to add a break.
We can use a b r tag and actually this is not a great idea as far as style it's a little bit frowned
upon but it's a quick and easy way to get started adding some returns and some line breaks and that's
all that this tag does is it adds a line break.
So we want one after the Great we want a break and then our span and then we want another break and
then color game at the bottom and if we refresh Now you can see we're getting closer.
Now we need to focus on making the span a lot larger.
So this band has an idea of color display.
So we're going to go over to R C S S and select color display just like this.
Id color display and then we're going to say font size is 200 percent of the H-1 font size.
And if we refresh we now get this much larger font size.
And we're getting closer.
We have our breaks in here.
You also notice though that we have a lot more space between the lines than we do over here.
So there's a few things that we can do to work on that.
The first one is change the line height.
So we'll give it a line height of 1.1 and save.
And let's look at our version again and refresh and you can see that shrinks down a bit.
But now we lost the space on the top and the bottom.
We need a little bit of space there.
So what we'll do is go in and add some padding.
So we're going to add padding to the top and bottom only not the left and right and we want 20 pixels
on the top and bottom so we can do that just like this padding 20 pixels and zero.
We could also have done padding top 20 pixels and padding bottom but this is a nicer short way of doing
it refresh and you can see we're almost there now.
So our header looks fine.
We have the correct font the correct font way it's all in uppercase the correct background color.
Let's make sure as I play stays correct looks all good.
The next thing we should tackle are the buttons on this nav bar.
So we definitely have a long way to go to improve those.
The first thing we want to do is get rid of the borders so we don't have this obvious border around
the button.
We also want to get rid of the background color.
So there should be no background as you can see here.
It's just wait until we hover or until we select one.
Also we want to make sure the font family is the same as this font up here.
So let's get started.
And I'm going to select all buttons so button and we're just going to say border none and save.
Pay attention to the buttons when I refresh.
OK.
So we now have no border.
But we still have that background color.
So now that same background none and save and refresh and we're getting closer.
So now we have just plain text.
And we'll start by making all that text uppercase like we have over here.
So we use text transform again just copy that line over paste that in there and refresh.
Now our buttons are all in uppercase.
The next thing we want to do is make sure that the button goes all the way from the top to the bottom
of the div stripe container.
Right now it only takes up part of the space so we can do that by setting height to be 100 percent.
And that means it will take up 100 percent of the containing element as you can see that gets us a lot
closer.
We just now need to change some colors change the font size the font weight and then change the hover
effect which we don't have set up yet.
The next thing that will do is make the font wait a little bit heavier and change the color to be still
blue as well.
So font weight will do seven hundred and then color will also be still blue.
And let's check that out refresh.
So it gets a little bit older and you can also see that the color has now changed to that still blue
the same color we have back here.
There's a really minor change that we can make which is to change the letter spacing to be one pixel
.
And if you pay attention when I refresh you can see things spaced out just a little bit between each
letter.
Leslie let's focus on the font size.
They seem a little bit too small.
So we're going to just use font size and set it to be inherit.
And if I refresh you can see that they inherit the font size and we don't have to explicitly said it
.
So let's take a look now.
One of the big differences is that they're currently spaced differently.
As soon as the page is loaded we have the space here on our version.
However we don't have that space until we click on a button.
So what we need to do is actually style the span that's right here and that span is called message and
we're going to want to go and give that some properties to make it take up that space and all we need
to do is change one property actually.
So we're going to select display our message which is this fan and we're going to change the display
property to be in line.
BLOCK So what that will do if I refresh you won't notice a big difference right away but that's because
we also need to assign it a with you know give it a with of 20 percent and save and refresh.
We now have this span even though it doesn't have anything in it that takes up 20 percent of this screen
.
So that pushes these elements to the side which is exactly what we want.
Let's take a look and compare them.
All right so that looks pretty close.
Now what we'll work on next is getting the selected class to match the right color and having our hover
effect as well.
So that's going to be down in our button and we're going to add the hover effect first.
So all we need to do is add in button Colan Huffer
and we're going to change the font color to be white and the background color to be steel blue.
So we're basically reversing the colors and we'll save and refresh.
Now as I hover you can see I get that effect.
Perfect.
And our selected class that we have is going to look just the same.
Just going to copy the styles.
There is no difference when we're hovering over something versus when it's selected.
They should look the same.
So you can see that looks right and I hover and only while I hover.
Does it get that blue background and white text color.
And when I move it goes away.
There is a slight difference.
If I hover over the solution buttons notice that it fades in that color.
It's not just an instant switch on my version.
It just toggles instantly.
We can fix that using a C Ss transition property inside the button selector.
We're going to write transition and pass it.
Two arguments are two values and the first one is what we want to transition and in our case we're just
going to add it to every property and then the next one is how long we want it to take.
So I'm going to exaggerate it at first with two seconds.
So again the transition property is how we can tell CSX how to animate transitions between color changes
or font size changes and properties.
So what I said here is that any time property changes on any button which in our case will really just
be color and background.
So whenever the color changes and the background color changes it should take two seconds and you'll
see when I refresh.
And I hover.
Oh that's still not working.
I'm missing my s here 2.00 s.
And now if I refresh and hover it takes two seconds to fade in and when I click to add the selected
class it also takes two seconds and it takes two seconds to fade out when I leave.
So two seconds is definitely too long.
I think I'm aiming for about point three seconds.
Let's test that out.
There we go.
It looks pretty good to me.
The last big thing is getting the rounded corners on these squares the way that we get those rounded
corners is using a property called Border radius.
So I have the median docs open if you want to take a look.
It's a good read.
But they show you some examples on the different things you can do with board a radius.
So what we're going to do is give it a slight border radius and these are squares here.
And let's take a look at what we're aiming for.
So those are what we want to get.
So it was slight slight curve.
Let's go up to our square class and assign a border radius and let's do something really exaggerated
to start I'll show you what happens if we do 50 percent.
We get circles and you might actually prefer to use circles.
I was considering using them but in the end I preferred these rounded corner squares and the number
that I used is 15 percent.
And we'll just double check and compare those.
OK so that looks good.
Fifteen percent but if you wanted I'll show you what happens if we did something like 5 percent and
refresh.
We get very slightly rounded corners.
So I'll go back to my 15 refresh and now we have our nice rounded corners but we also need to work on
getting the animation effect because when I click on one of these.
Notice how when the color changes it fades out just like the hover effect faded in and out.
To achieve that we also need to use the transition property but in a slightly different way.
So I'm going to go to square and the only thing that we want to transition is the background color or
just background.
And again let's do a long time like 2.0 seconds and see how that looks.
So I'll refresh and I'll click on one of these.
You can see it takes two whole seconds to fade out.
So we don't want something to last that long.
Probably go for zero point six maybe.
Let's try that.
OK.
That seems reasonable.
So you can see whenever that background changes it takes 0.6 seconds.
What's different though is that when other properties change it doesn't animate them like our buttons
where we said when any property changes it should take point three seconds.
We're only targeting the background and that changes.
It should take 0.6 seconds.
One minor thing that we do want to be aware of is that the transition property won't work in all browsers
the way that we have it written right now to be as browser friendly as possible.
We actually need to add in two more properties which we won't notice any difference in functionality
but there are just for browser support.
So the first one is Web Kit Dasch transition and we'll just add the same exact value here just like
that.
And then we need another one which is this should be one dash Moz M. Ozy.
So these are actually browser prefixes.
So Web Kit is for Web Kit which is a an engine that browsers use like Safari.
And then we have Moz and Mozy which is short form is Zilah which is what Firefox is built on.
So these are just to add some more support because the transition property isn't built into every single
browser yet.
So we refresh.
Nothing should seem different.
Our game still works the same way and we still get the same animation and we should do the same thing
down here when we have transitioned all just duplicate this and change that to be transitional and transition
all 0.3 seconds for the MOOC transition.
One last thing that we can fix here is the bit of spacing in between the stripe and the start of our
grid.
So you can see we have some more spacing here that we don't have here.
And right now if we inspect we have an element that is around our grid.
We have our squares and we have a div ID container and that container div goes around all 6 squares
.
So we can use that and just add some spacing to that container div we'll just add a margin to the top
and bottom.
So I think we have styled it already a little bit.
Here we go.
So we said margin is zero.
And auto what we'll do instead is say margin is 20 pixels on the top and bottom and auto on the left
and right which is how it is centered.
So we want that to be auto on left and right but 20 pixels on top refresh.
We have our spacing.
OK so we're done with the styling for now.