In the session, let us get an overview of CSS box model and CSS transitions. Basically, every HTML element is considered as a box. css box model is a box that wraps every HTML element. Let me explain you with an example. I have a paragraph tag. This is considered as a block.

This paragraph tag has its own box model. What does this box model have? It has that margin, border padding and content. That content is nothing but the content wants to write in within the tags within the HTML element. padding. padding is an area that clears the content.

The space next to the content is called as the padding and it is transparent. Next baddest, of course you know what is a border. The border around the element is called a sea border. margin margin, clear the area outside the border. Whenever you are giving height and width of the element, it is only the height and width of the content. How to Calculate the width of the element?

Okay, why do I need the total waste of the elements? When I am trying to design my webpage, I need to specify the layout, I need to specify how many elements I'm going to accommodate in the container. In that scenario, I need to know the total width of each and every element. When you say the total width, it is not the risk of that particular element. It is the service like ah, here's the token element, this is nothing but the which plus left padding right padding, left border right border, left margin and right margin. Similarly when you talk about the height, it is not when you say height alone, it is only Content height, if you want to find out the total height of the element, it is less, I mean top margin bottom margin, top top or bottom or bottom, top padding bottom padding and the height of the element all put together becomes the total height.

Why do you need this as a tool, when you want to arrange the elements in the container, you have to consider the total width of the element not the whisker node. And again you have to consider the total height of the element not the height alone. When you say height, it is the height of the content. When you say when you want to consider the total height, it is all put together margin border and margin, border padding and content. Let me explain this with an example. I wrote the HTML page with a paragraph tag.

Now let us try to visualize this in the browser and then We will try to add one by one that is margin border padding. Now we have got the output Let me try to inspect the element. So right click inspect identify the paragraph tag. So here it is p select the CSS part scroll down you can see the box model for this particular paragraph tag. We are not specified with our height so it is coming with a default values. The width of the paragraph is 134 height is 234 dot margin or 16 modular 16 Okay, now let us try to add all these by ourselves.

So let me go inside the site. For this paragraph, let me add this Okay, first let me add the background color. Let me save this. Let me Refresh. You can see it is taking the whole width of the container This is a block and now I will go on give the width and height with hundred pixels height hundred pixels. Let me save this again refresh.

Okay. I will increase the height. I am saying the CSS styling I have given the width of 200 pixels and it has 200 pixels. You can see the output of the browser. Now again let us inspect the element so just right click inspect. It is not that deal but it is a paragraph tag.

So, open this div inside that paragraph selected, scroll down to the bottom you can see the item which is only for the container not for the whole element. Next, let us try to add padding By adding 25 pixels and giving it may save this refresh. When I do padding, you just have a look what is happening to the content, the space between the margin and that content is getting increased. So 25 pixels on the bottom and on the top similarly 25 pixels on the left and on the right, this is padding. You see the box model also. Let me scroll it down you can see the padding if you're certainly I mean if your space is specially want only on the left, you can use padding left 25 pixels.

Now let me save this I will refresh. You can see padding is given only on the left part not on the top bottom or right corner. Again, see the box model. Right next. I will have it to the default as padding 20 pixels. Next, let me go in for border border 10 pixels if you want to see the border properly you can go in for solid border and also you can give a color let me give a color let me save this let me refresh, you can see the border border is an area outside then the man after the party see the box model right.

So, the total with novice 10 plus 25 plus 200 we have not specified any margin. Next let me add Okay, you can just see the how it is getting scored. So, this is the content This is the padding part, this is the border part and also of course, you can add the margin, I will add margin and save this let me refresh. You can see margin from top 20 from left 20 I mean I said of course it is having 20 pixels on the bottom also having 20 pixels. Let me scroll it down You can see this model. So this is how you calculate the height and the width of the animal when you are placing the elements in the container or the viewport.

So this is very helpful or this box model is very helpful when you are designing a layout for your web page. Next, let us move on to this transmission. transmission. Transitions means moving from one to another very smoothly. transitions and CSS allows to change the property values very smoothly. assume you're having HTML elements you want to handle an event are do an animation on that HTML element.

When you are doing that, it happens immediately. On hovering the mouse on a particular element, you can increase or decrease the size of the element or the content if this happens immediately, but if you want to have a smooth effect, you need to go in for a transition. So transition will happen. But wouldn't leave in that particular value changes have a look on this particular example, I have a do now I have given width and height for the tip and I am trying to on this particular development when I'm hovering I want the width to increase by 300 pixels. When I am doing this this effort happens immediately, but I want to have a smooth transition, how it can be achieved by using the transition properties, I have added the transition property identify the this property if the with the property is getting changed, give us more transition.

That's what is going into over here duration means the increasing of the this happens for two seconds. Then transition timing function. There are few timing functions available like ease linear ease in ease out ease means initially it will be slow then fast then slow linear means this The same speed is in means work it will be slow in the start is out means slow in the end, how actually you want to see the transition effects all these can be achieved with the help of transition property. Now, let us see an example for this, I have created a HTML page with the development, I have added few styling for this particular element I have given with height, color and background color. First let me open this in the browser. I have got the output.

Now, I'm hovering the mouse on this particular div I want to increase the width of this element. How we can do it is very simple. Going for the colon hover increase the width to 300 pixels. Let me save this I will refresh Can you see on hovering immediately it happens, but I want the transition to go very smoothly or I want the change to go very smoothly for that I have to go in for transition property. Let me go on at the transition property. Now here I need to specify transition pay for property on which property you want to do the transition on changing office with property and session duration, how long this transition should happen.

Transition hyphen duration, two seconds. Then, transition timing function as they call it has got to reduce ease ease in ease out ease in now linear. Now I have selected is let me save this. Let me come here. Let me Refresh. Now, you can see that happens very slowly or it happens very smoothly transition helps to change the CSS property values very smoothly.

With transitions you can specify duration, how long you want to have done in this transition to happen. And then with which speed you want this to happen, that that is transition timing function. There is also one more thing like transition delay between transition duration and transition delay. Transition duration means changing the property values over a period of time. for two seconds this transition will happen and transition delay me start the transition only after two seconds. Let me refresh this.

It is sad only after this okay. I have not saved this. Let me refresh this. After two seconds only the transition will start, I will show you again I will refresh. I have kept eye over the mouse on this particular device. Only after two seconds the transition is starting, and it is continuing for two seconds.

So when you want to give a smooth effect kind of animation for your CSS and HTML elements, you can go in for the transition property. We have seen in this session as a overview of box model and transition box model is a model which wraps around every HTML element and it is used to give a nice layout for your web page. Transitions help to trance amin helps to change the property values very smoothly. It is very useful when you want to provide a kind of animation to particular elements in your web page. Thank you