All language subtitles for 5. Styling Our App

In this video.

What we're going to start doing is styling these h html elements.

Now again, this isn't really related to view three and NOx.

So if you want, feel free to just go to the link, go to my branch and just copy the source code and

skip this video.

However, if you want to follow along, then well, let's just get started.

So the first thing that we need in order to define our styles are style tags, of course.

So we're going to say style.

We're also going to say scoped so that these styles can be scoped to this file only.

So the first thing that I want to do is I want to style the container.

So the container is actually a class that I didn't define here.

And it is going to house our entire application.

So I want to style this div right over here.

So I'm going to go over here.

MSA class container.

Now, right over here.

Let's apply some of the styles.

So I'm going to say container.

And the first thing that I want to do is I want to change the font family Marina.

You can see that we're getting this default font.

So I'm a changed font family to something like font family, I must say Arial and then have Attica and

then sans serif.

And that should change.

If I refresh, it should change our font a little.

Okay, so the next thing that I want to do is I want to change the default color.

So the color is going to be our chibi.

I'm going to say 27 and then 60 and then a 138.

So that's going to be the default color when I have this bluish color, which is nice.

And then we're also want to center this right in the middle.

So what I'm going to do is a going to give this a max width of around 50 grams.

And then I'm also going to give it a margin, zero auto.

And I am going to do a text, a line of center.

So now once we do that, you can see now everything is nicely centered in the middle.

Okay.

So that is the very first thing.

Now, what I want to do is I want to make this a little bit bigger, this title.

So what I'm going to say here is inside of the container, grab the H1 or we can honestly just do H1

because we just have one H1 in there.

And we can say font size three grams.

And I can see now that is a little bit bigger.

Now, mind you, that I am zoomed then because it would look relatively small if I have it.

Okay, so let's go ahead and continue on.

So the next thing that I want to do is I want to start working on the options container.

So right over here, this whole thing should be wrapped in a container and this should have some nice

background color.

So let's go over here and let's just say options container.

And keep in mind we have an S here, so options container and then over here we're going to have a background

color, not clip color.

And this is going to be RGV.

And then over here we're going to say two, five, five red, say two, three, eight, and then two,

three, six.

So it's going to be the color.

And you can see here and now we're getting that wonderful little color, this wrapping all of our different

options.

Now, the next thing that we need to do is apply a border radius so we can get those rounds, rounded

corners.

So we're going to say two rems for that.

And now you can see we get the cool rounded corners.

Now, of course, we need some padding.

So let's go here.

We're going to say padding or one rim.

Now we get some nice little padding and let's actually make this width 95%.

So going to say 95% of the width like so.

And then what we're going to do is we're going to also apply a margin zero auto so we can center it

and give it a margin top of four rims.

And we're also going to give it a position relative position relative like so.

So let's go ahead and save that.

And now you can see that it is very, very big and everything is nicely centered the way that we want

it to.

Okay.

So that is pretty much all we need.

Now, those are styling the options themselves.

So the option containers themselves.

Now, the only thing that I want to do is have just a little bit more spacing between each option.

Let me zoom out of here a little bit.

And so in order to do this, we can just apply a margin so we can say option and then dash container.

I'm going to say margin bottom.

Bottom off.

Let's go to Rams here and there we go.

So now we got this wonderful margin bottom.

Now the next thing that we need to do is style the buttons themselves.

So over here, what I'm going to do is instead of actually grabbing the button, I'm just going to give

all the buttons a class of option, because that's exactly what they are.

They're options.

So over here, let's just give it a class option.

Class option, class option, class option.

Over here, class option, class option.

And then lastly, class of option, right over here.

So what I'm going to do is we're going to well, we're going to style the option now.

So we're going to give this a background color.

Of whites.

So going to give the background color of whites, we're also going to give it an outline of 0.15 rems.

We're going to say solid.

We're also going to say that the color is going to be RGV and we're going to say two, four, nine and

then eight, seven and then eight, nine.

Okay.

We're also going to give it a border of none.

We're going to give it some padding.

This is going to be 0.75 rims.

We're also going to give it some width.

So say width of 120 or 100 or 12 rims over here.

And let's go ahead and close that off.

And now let's give it a font size of one rim.

A color of RGV and we're going to say 27, 60 and 1138.

And then let's give it a cursor pointer.

And then what do we need?

We need to find weights of 200.

So now if you go ahead and save that, you can see that this is exactly what we get.

So this is looking really, really good.

Now, the last thing that is missing is right over here.

So to the right and to the left, you want to have those rounded corners.

So what we need to do is we need to actually apply some conditional styles here.

So over here, what we can do is at the very top, we can say something like this is going to be to

the left.

So we can also give this another class of option left.

This one is going to be option right.

Now we can do the same thing over here.

You can say option left here.

Option right here.

And then over here we can say that this is also going to be to the left.

This is going to be to the right.

Now, right down here.

Now, what we can do is just say option left.

We can just give it a border radius so we can say border radius.

And this is only going to apply to the left side.

So what we can say here is we can say one room to the top right corner and then or start to the top

left corner and then zero rems in the top right corner and then zero rems in the top or the bottom right

corner and then the bottom.

Okay.

I think I'm getting myself confused here.

So one ram in the top left, zero in the top right, zero in the bottom right, and then one in the

bottom left.

So that's what it means right there.

So now what we can do here is copy that pasted over here.

And also now what we could do is just basically flip this around.

So you can say zero one, one ram and then zero like so.

So now let's just go ahead and save that.

And now you can see our styling is pretty much done at this point.

So it's pretty much all it is that we need to do for styling.

Now let's get into the fun stuff where we start working with View three and Knocks.