Welcome back.
Now that we have the basic functionality of our To Do list app done it's time for us to focus on making
it look like this.
So we definitely have quite a ways to go.
And we're just going to attack this one piece at a time.
I'll try and do this in the most logical possible order.
We'll start with some of the bigger pieces like the background colors and fonts making sure that we
have the right margin and padding on this big container here and then we'll focus on some of the more
nuance things.
OK let's get started here.
The first thing we'll do I'll do a full screen.
Let's start by just pushing this down.
This is our container div.
We'll add a margin to the top so that we have more space up here.
So we'll go back to our C S S and can close down or javascript for now.
Our div has an idea of container and then we'll go and select that here which you've already done.
And rather than a margin of zero OTTO Well give it a hundred pixels on the top and bottom.
And remember we need the x if we have zero we don't need X but if we have a number we do.
Let's take a look now.
OK so now they are starting at the same place.
They have the same margin there.
The next thing we'll do is add a background color to this container which this one has.
It's a little bit difficult to see but when I delete something it shows through in the back.
It's this color right here.
So that again.
So we'll go ahead and add that.
So instead of container well say background and the color.
I'll just read it out is F 7 7 after 7.
Just like that.
And let's check how that looks.
OK.
So we have the same gray color that we have right here.
It's the same light gray.
The next thing we'll do is work on the border.
And this actually doesn't have a border.
What it does have is a very slight box shadow.
So we haven't seen box shadow yet.
I'll demonstrate that here and go into MT-NW and it's just a way of adding a shadow effect.
So if I scroll down you can see here are some different box shadows and we're going to have a very light
one but if you notice around this there's a really slight shadow.
So the syntax and the shadow that we're going to use will get rid of our border is box dash shadow 0
0 3 pixels and then a color and our color it's going to be just basically black but it's R.G..
And then we're going to make it really really transparent.
So just barely noticeable.
And if I refresh.
We have no border now but there's a slight shadow around this element.
OK.
That's all we'll do to the container for now.
Let's attack the H-1.
So this heading up here.
So that is in our age him l just considered an H1.
It doesn't have an ID or anything and that's fine.
Let's go to the CSSA file and start by adding in a background color.
So we'll select each one and the background is a color that is 2 9 8 0 be 9 and they'll save and refresh
and we now have the correct shade of blue.
So we'll also change the font color to white
and quickly show you that.
All right.
Slowly inching closer here.
The next thing we'll do is give it no margin and now we'll just get rid of this space that we had here
.
As you can see here there is no margin.
This is our H-1.
There is padding here.
So the text doesn't go right up against the edge like it does here.
But there's no margin on the outside of the blue box.
This is our text input and that also has increased padding but there's no margin around that either
.
So we'll begin by adding some padding around our To Do list.
H-1 So here we're going to add 10 pixels to the top and bottom and 20 pixels to the left and right and
save.
You can see we're getting closer.
We need to change the font size.
Need to change the font.
We also will uppercase all of that and we can do that by now.
You should know one of my favorites is text transform uppercase.
I just think it's pretty cool.
There we go we get all uppercase the font size needs to be 24 pixels so font size 24 x and save OK the
last thing we'll do is make sure that it's a normal font weight.
So an H1 by default is actually bolded and we don't want that.
So we'll do Funt way normal or we could also write font weight 400.
There we go.
Now it's just a matter of changing the font which will come back to the next thing you want to tackle
is getting rid of these bullet points.
You can see if we don't have any bullet points here.
Those bullet points are considered the default browser style.
So we'll override that.
We're going to select the UL that they're inside of and say list style none.
And if we go back and refresh we now don't have any bullet points.
Another thing I'm going to do is honor you well set the margin to be zero and the padding to be zero
and it will refresh here and not just get rid of the space on the sides of the well we do have space
here that we need to work with but that's the lie not the UL itself.
So we'll come back to that.
Now let's add in the correct font and the name of this font is rubato and it's part of Google fonts
.
So I have that open here and I'll just do a search for it rubato.
And here we go.
Add to collection then use.
And we're going to want normal way.
We'll add in bold and also medium.
Now let's go ahead and copy this link to our HMO and we can close this window.
Go back to where each team out here and just up top paste that in and save then we'll go to our to see
assess and we'll add some styles to the body.
Everything uses this font so we'll just add in font family robotically.
Just like that.
And if we go back now and refresh our H-1 is pretty much there.
Aside from this button which we haven't touched at all the fonts the same the color the spacing all
that's good.
And our allies are getting there.
They have the right font.
We need to work on some of the spacing and padding issues.
The next thing we'll tackle are the background colors on the lies.
So every other lie.
It goes from a white color pure white to this gray color that we have as a background of the the.
So we can use the SS to add styles to every other ally.
So let's do that now.
The first thing we'll do is select all allies and give them a background of white so we can do that
with F F F or white or R-GA 255 255 to 55 and then we'll do every other lie.
And the syntax for that is a lie and child to end.
And that too and well defined a pattern of every other.
And if we did three and it would say every third but we just want every other.
And we'll make the background color the same f7 f7 f7 that we used for the container background and
refresh.
Now it's hard to see because they're a little small but every other lie is now this gray color.
So add in a few more and you can see they alternate perfect.
Now let's address the issue of the height of the lies and also the padding.
The first thing to do is give them a height of 40 pixels so all allies height 40 x and we'll go back
refresh.
OK so they take up the right amount of space.
Now if we compared them the font has some issues.
And also we need to add some padding.
Next are going to change the line height property on the lies so that our text is centered vertically
.
Right now the line is basically this tall.
We're going to make it take up the entire 40 pixels show you line height 40 x and that won't change
the size of the font it just changes the size of the line.
It's now 40 pixels.
So the line takes up this entire area.
The next minor thing is the color we have pure black and the color I used isn't exactly black.
It's slightly lighter.
So we'll set color and it is six six six refresh and then we go next let's address the input.
So we have a few things you need to do.
The first of which is make sure that it takes up the right amount of space.
So this input is much larger and it's not just padding or margin the font size is larger.
We have a new background color as well.
And there's a border when we click.
So let's work on all of those and we'll start by just adding in a bigger font size.
So we'll select input font size
and we'll set font size to be 18 pixels.
And while we're here we'll do the background color as well as the background color and it's the same
f 7 7 1/2 7.
Just like that.
And let's refresh.
OK.
We're getting closer.
The next thing we'll do is add a width and the width that we're going to give it is 100 percent.
So right now it's only going part of the way across the container.
If we refresh it now goes all the way across.
But we have a few small issues.
First thing that we want to take care of is some padding in there.
So we're going to add padding 13 pixels on top 13 pixels on the side on the right.
13 pixels on the bottom and 20 pixels on the left.
So you can see on this one.
We have top and bottom are 13.
And on the left there there's 20 pixels.
So if I were fresh We now have a bigger input that takes up the right amount of space.
We do have a problem which is that the input is now too long.
When we said that with should be 100 percent that with was actually just the content and it didn't include
the padding and it didn't include the margin which means that our input goes to long past the end of
the div and rather than messing with the padding.
I mean to show another way of changing it which is a property called Box sizing.
So with block sizing you have a few different options but it basically controls how the box is sized
of the box model.
And we're going to change it to border Dasch box.
And what this does I'll just read it says the width and height properties include the padding and border
but not the margin.
So if we change it to border box which I'll do now we go into here just add box sizing order box and
save it before I move on.
I will point out this is one of those properties that we do want to have the prefixes.
So the Web Kit and Mozy are Moz and the mess from Microsoft.
I'm not going to do that now.
It will be in the solution code.
But it just takes a long time to type up.
So it will work just how it is in Chrome at least I refresh it now.
Our box is including the padding in the border but it doesn't include the margin.
So we end up with a perfect fit.
Next I'm going to give the font a color when I type in there.
So all we need to do.
I'm going to just take the same color from the H-1 and go down to our input and just say color it's
that color.
And if we refresh now and we start typing There we go.
Now let's focus on the effect.
When we click which is called focusing in the input you can see here we get a border around it.
So we need to work on that.
Right now we have the default focus effect.
So there's a selector for that input colon focus just like the hover pseudo selector.
These cells will only run when we have focused on an input.
So I'm going to make the background white when we focus on it.
I'm also going to give it a border of three pixels solid The blue color we've been working with and
we'll give it an outline of not an outline refers to this annoying highlight that we get from the browser
itself.
Now if we focus on the input we get this new blue border and we also change the background color so
it's gray now it's white.
So that's all we need to do for the input although we should go and add the placeholder text that we
have here.
So I'll go to the index HTL and next to the input or in the input will add the placeholder attribute
.
And this can be whatever you want.
I'll just make it match.
So it's add new to do and refresh.
There we go.