And this is how it looks right now now in this video we will add the css and make it look like this so let's get started .
right here i'm in the source code of our design and here we have already linked our css file over here so let's go to style.css file and let's.
Get started with the design now the first thing we will do is we will style the container division so for the container division we have a division with the class of bmr.
Calculator so let's go back to our style.css file and let's type dot bmr calculator and let's set a max width of 300 pixels.
And we will set the font family to roboto and sensative and we'll also set a padding of 8 pixels top and bottom and 24 pixels left and right.
How it looks right now now we'll also add a line of code called box sizing and set it to border box so that we have the correct height and width for the elements so let's type bmr.
Calculator and we'll also select all the elements inside this bmr calculator division so let's type comma and bmr calculator.
And asterisk so this is select all the elements inside this class and let's set the box sizing to border box all right now the first thing we will.
Style is this heading so for the heading we have an h2 so here we can see we have this h2 so let's style that here i'll just type bmr calculator h2.
And let's set the text align to center and we will set a background color of dark gray and we'll set the color of the text to white.
And let's set the font weight to 100 Wesdigital
And now if we go back to the original design we can see that we have this heading spanning across this container division.So here if i just add a background color we can see this is the width of this container division which is bmr calculator and we want this heading to have the same width.
So for that we can add a negative margin so let's type margin and here we can see we have added a padding of 8 pixels and 24 pixels so we have to add a margin of negative 8.
Pixels and negative 24 pixels and now we can see it is having the same width as the container division right now let's add a margin bottom.
And let's set it to 8 pixels and let's also add a padding and let's set it to 16 pixels right now let's remove this background color.
Now the next thing we need to do is we need to style all these headings now for those headings we have an s3 so here we can see inside the form we have this s3 for age gender and so on so let's target.
The s3 and just type vmr calculator and it is inside the form so just a form s3 and let's set the font size to 15 pixels.
And let's set text transform to uppercase and i will also set a margin of 16 pixels top 0 for right and 10 pixels bottom and 0 for left.
Now the next thing we will style is these input fields so the input fields are inside this form and we have this input field with the type of text so let's target that here let's type bmr.
Calculator
Form input with the type of text and first of all let's set a width of 100 and we will add a padding of 4 pixels.Top and bottom and 16 pixels left and right and let's set the font size to 24 pixels and we'll set the font weight to bold.
And we'll also change the border so i'll just a border and let's set it to one pixel solid and for the color we'll set it to d5 db dd now let's add a little bit of gap.
Between all these elements so we will target the form so let's type bmr calculator form and let's set the display to flex.
And we set the flex direction to column and we will add a gap of 4 pixels right now let's add a left margin for the second radio button so if you go back to our html.
Here we can see for the second radio button we have an id of female so let's type bmr calculator form female and let's set a margin left of 20.
Pixels right now let's style these units we have centimeter and kg written over here it should be positioned at the right side over here so here we can see we have these units displayed over here.
At the right now if you go back to our html file here we can see we have this division with the class of height and in that we have this unit so we will position the unit relative to this.
Height and we will position this unit relative to this weight so first of all let's add position of relative to height and weight.
So let's type bmr calculator form height and bmr calculator for weight and let's set the position to relative and now let's position these units and.
For the units we have a division of the class of unit so let's type bmr calculator for unit and let's set the position to absolute and we'll set the right.
Position to 20 pixels and we'll set the top position to 50 pixels and let's set the color of the text to 777 so that's it with the units now let's.
Style this button now if you go back to the html file here we can see we have this button with the class of calculate button and it is inside this result division.
So let's type bmr calculator result calculate button and let's set a padding of 8 pixels top.
And bottom 24 pixels left and right and we'll set a margin of 16 pixels top and bottom and 0 for left and right and let's set the font size to 18 pixels and we'll set the phone to weight to 100.
And let's set the text transform to uppercase and let's set the border to none and we will add a background color and i will set it to.
333 and reset the color of the text to white and we'll set the cursor to pointer and we'll also bring it to the center now we have to bring both these elements.
To the center we have to bring the button and also this result message now both of them are inside this result division over here so let's target that let's type bmr.
Calculator result and let's type text align set it to center and let's set the color of the text so let's type color.
And let's set it to 4e4e4e and let's see the font size to let's try 18 pixels and now let's style this number so for.
The number we have a different styling over here so if you go back to the index.html file here we can see for the number we have created a span and we have given it a.
Class of calories so let's target this so here let's start bmr calculator result calories.
And let's set the color of the text to green and let's set the font size to 38 pixels and let's set the phone to weight to 900.
And we'll also add some margin right so let's type margin right and we will set it to 8 pixels and if you want to bring both of these to the center vertically you can just.
Add a line of code which is vertical align and set it to middle right now let's add some gap between this button and this result message so.
For the button let's add a margin bottom and let's set it to let's try 32 pixels and that looks alright so that's basically it with the styling of our bmr calculator and with that we have.
Completed the css of this design now in the next video we will add the javascript and make it work so that's basically it for this video if you have any doubts you can ask in the.
Comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.