Hello and welcome.
In this video I will be dialling the calculator.
So I'm going to be using a mixture of in-line styling.
It's in the style attribute and using an external success.
So while the ninth time in what I want to do I want to keep each of the operators a different background
colour so that they are unique.
They standout came back calculate and want to do that is to add style attribute inside the helmet.
So this is the plus operate.
So what I'm going to do.
I'm just going to expand this half of the actual plots before the quotes there.
I'm just going to attach playstyle attribute.
So after the quote after this single visitable quote here I am going to attach.
Here's our tribute So you just type in style which is S T L S T Y.
And I'm going to set that to equal to the Anita specify the propertys.
I want to add to the button so it's going to be a background colour so I'll sell it by ground colour
and I'm going to use an Hexa value.
I already know what I want so I'll just add that you can add whatever colour you want if you know the
name of the call or you can add it.
You know the X decimal value you can add it as well.
Don't forget you always have to end it end of values with a semicolon when you are using attributes
it can see.
And they did it.
So Michael on you can see the cortizone and tribute here is or even closely in quotes.
So I'm just gonna say that and take a quick look and see how that is reflected.
You can see here now the background call of use is now apply to the Titian operator.
So basically I'm going to use the same technique for the all of our operators and also for the course
to a button I want to keep it its own background colour.
I have now attached a style a tribute to all the operators you can see here the addition operator of
colour background colour on that if you put your mouth so you can see the colour the suppression operate
on the same plane.
This is the I've given it the multiplication.
This is a collage.
We have got one or so for the clear button a clear button I've given that colour and be cause to bottom.
In this column.
And also the devotion button I've given the green collar on giving a close call.
GREENE So you can also use if you know the name of the colour you can specify that like I've done here
or if you prefer to use the hexadecimal value like I've done in the others you can also do that.
So let's take a look at this and see.
So this is what this is the effect of what I have done.
So you can see the overall poor background colour.
So that is all I'm going to do for the line styling.
Next I'm going to move on to my external style sheet and do more styling in order to make the little
one and make the buttars big create some spaces and make it look more presentable.
So I'm going to open up my style sheet which is this one here of course that CFS have already linked
it to my phone use in my link attribute here.
So click on this file.
So this is where I'm going to add some external styling.
So the first thing I want to do is target the input element so and then type in put.
Separate that with curly braces in between the curly braces.
Here's where I will specify the input.
So for example here I'm going to specify with height the size of the font the border radius there it
does come I gives it the rounded edge and then to also add my own property background colour and then
be quite low.
I want to give the text so this airport here is thailin had hit the wall applying to all the import
element so anything that is known as an import.
You can see all this complex here.
This is what this thiamine Im going to add here all affect.
So this is the stylin I have attached to all my input elements so you can see here.
I've got the whip.
I have set two hundred and fifty pixels the height 200 pixels the font font refers to the size of the
text in the button.
So I've said that to 75 pixels by their radius 10 pixels.
The margin margin refers to the space around the element so the margin of giving it 10 pixels which
will apply and then require the background colour which upset to black.
This is black for hexadecimal and then the column represents a lot inside the text.
So this would represent the colour of the output text on the button.
But our style is none.
So basically the body removed and dialling from the border.
So let me see that and let's take a look.
All right so this is what it looks like half this time in see it looks a bit more decent doesn't it.
Alright so this is how it looks at the moment it still works if I do two plus two equals four.
It's clear that there are four times four and that gives you 16.
So calculators working.
The next thing I want to do I want to send to this head in head in title development.
I want to make it more Centre and I want to move the code collate all from the end one and more it a
bit more central.
How to achieve that using the margin element just to move the entire container which is the form I'm
going to move it's more centrally to the page.
So I've completed this stylin now so this here is the form I go in to my index.
You can see I have called the form clouds form.
I go back into my style it.
So this here is this time.
I have give in to the form.
To all that to move from the left which is margin left 225 five pixels.
Obviously you can play around with values and see which one suits you.
So it's moving the form from the left.
Two hundred and twenty five pixels from the top is going to drop 20 pixels so it's going to create some
space from the top 20 pixels.
And this is my head tag here.
So my head element I have set the text to align to the centre.
And here the font size I have set to be 80 pixels.
This would be the size of the text on the button margin from the right.
I'm told from the right in the elemental 150 pixels from the right is going to move from the top from
minute 20 pixels is going to from the top is going to drop 20 pixels to create some space.
So that's.
Let me see that.
Let's take a look.
So this is what it looks like.
You can see this is the heading so that I've sent it.
And this is thin margin.
If you don't want any spaces between the buttons you can reduce the margin.
This line 7 here is what's responsible for this spaces between the bottom.
So if you want very little space maybe you can set that to one pixels but play around with the values
and see what suits you best.
So that is basically cockily top projet complete.
So thank you so much for watching.
If you have any problems at all please feel free to let me know.
Thank you.
All the best.
Bye for now.