Understanding Calc Function in CSS

Hello guys. Welcome to our segment, CSS. In our last segment we had seen about CSS List properties. When we use html list, at that time which different properties of CSS and with the help of its values, we can customize the list and design it. I hope you have performed the practical of CSS related properties and practiced it. Okay, guys! so, let’s start. Our today's segment is on CSS calc property. Calc property is a very useful property. As it is written here, clac function allows us to perform calculations means anywhere if you want to use CSS property but based on the result of the calculation you want to use the property or you want to assign the values. So, in that case, calc function is very useful. Like it is mentioned here, it is and can be used to calculate, length, percentage, time, number, integer frequency or angle. So, it means if inside any value of property, if we want to specify length or we have to pass values in percentage, somewhere time, number, integer we want to pass. But we also want to calculate depending on the width size or based on some other parameter. In that case we can make use of calc function. Calc function gives us permission to use arithmetic operations like plus, minus, multiplication and division. So, why is calc useful, like you can see the syntax here, calc and thereafter expression. For example, if in one screen size I want to add more than one controls for example, if I want to add multiple input contents. So, what do I need to do? I don't know that what is the fixed width that I need to keep for input control.Or  I don't know that this input control that is there, in which devices, it can be used. So, let's say I want to use 4 input controls and I don't know the width of the device, in that case every input control’s width I can give as 50% divide by 4. Like it is written here, clac, in the expression will come width,100% divide by 4. So, what will happen. Whatever is my width size of my screen, every time my function will calculate, 100% divide by 4. It means that whatever is the answer of 100% divided by 4. That answer will be applied to my input control width. Okay! So, what will happen in this? One screen in the width. 4 input width will be set with the similar width. So, this is an advantage of calc function. How are the values passed? Like it is mentioned here. This CSS function takes a single parameter expression, and the result of this mathematical expression is used as a value. So, the thing that we have to note here is that in calc function only one expression can be passed. More than one expression cannot be passed together. Like we have taken a few examples here, we have taken width under div. In that calc,150 % minus 75%, this is the calculation that we have passed. So, in the calc, at a time only one expression can be passed. Like here 150 minus 75 is an expression. Like this one expression, like this only one expression can be passed at one moment. We cannot pass more than one expression. Okay,guys! This is not a limitation but this is a rule that we can pass only one at a time otherwise it will be difficult for our property to define which value to select. It will be difficult for our property, for width or height. Which value should be selected, when should we select the 1^st value and when the 2^nd value? In this we can only pass one value expression. Whatever is the result that is passed as a value. It can be any simple expression using 4 arithmetic operations.  The expression is mandatory to define, means if we are using calc function, so what is compulsory for us is that we define the expression. Now, we will check this with an example. So that it gets clearer to us.Okay,guys!  For example, we will 1^st open sublime text. HTML, example calc, calc.html, we will run the program. Okay. So, what do we have to do now? We want to make use of the calc. For example, we will take a division. The width of the division, usually we define it as 100%, 20%, we define it in default percentage. But this time with the help of the calc we will define its width, to perform the example. So, let’s say I will take one div and in the div I will add “This is Learnvern” and in that we will take “This device width is set with calc function”. Here we will take width, calc, for example in the calc I am going to pass the value, 150%-75%. This is the value that we are going to pass, what will we do for it. I am going to save it. So, when I am running it, “This is learnvern, this device width is set with…” we are getting such lines. So, to set it what we will do, 1^st of all is. We will add one br tag. We will add one more br tag here. Okay, so we are getting 3 lines. Now what I will do is, I will add one style here. In style we will pass the div. First of all, Okay, we will apply all the properties to div. Background color, light green and we will take the color, for example, we will take orange. okay!Now we will add width, what is the width that we have written here, calc 150-75%. So, calc, 150%-75%. Okay. So, let’s say we have to even give it height. So, even in the height we can use calc. So, let’s say that we have given the width in percentage. But the height we have to pass in pixels. So, let’s say I take it 300 pixels-(minus) 70pixels, save. Okay. So, when I am reloading it, I am getting a width here of 100%. If I am getting 100% width that means here the calculation that we have passed, the information is wrong that we have passed or we have written a wrong syntax. You can see that the width is 100% that we are getting. The 75% that should have been subtracted, is not happening. We will rectify the error in our program. So, in our program the error that is there is this, that we have written here calc and written 150%-75%. So, this is our one continuous expression. To perform the calculation, for example a value, b value. We are taking one number and two numbers. A space between them is very necessary. So, here 150%, space, after space 75%, as soon as I added the space, my arithmetic operation, for example subtraction. Its color has been changed to red, whereas it is purple here, which indicates this operation, this sign is the part of this number. So, I will add the space here. So, my two numbers are getting defined here. Means a and b we can say. These are my 2 numbers and this is my arithmetic operation that is getting defined. We will save it and run it. As soon as I run it. The height is getting increased. The height is 300-70pixels (300 minus 70). Means it is becoming 230. And same is my width, from 100 I have subtracted 75%, 150%-75%.(150% minus 75%) My answer that is there, that is my width which I am getting. I am getting 75% as my width. Initially starting from the left point, we are getting this much width and this much height. How have we passed this width and this height? We have calculated and passed it. If the same screen I open in some other window, like if I open it in my mobile. The same calculation will be calculated in the mobile. From the full width, whatever is less by 75%, means 75% is my width. Out of 150, 75 minus, means 75. Currently in this device, where I am recording this. 75% of this device screen space I am getting. If I open the same webpage on my phone, 75% of my phone’s screen will be calculated and I will get that.Okay, guys got it?  What calc does is it will calculate as per the requirement, whatever values we have passed, that much width or height or whatever parameters we have set, that much value it will set and return to us. So, this was our example of calc. Here we have taken 2 examples, 1^st was of width, the 2^nd is again calc, we have passed the values in em. So, we will even perform that. So, let’s say, we will take div. “This is Learnvern”, this width…property.(pause) We have taken here, width calc 40%+10em, height we have taken 350px-70px(350px minus 70px), means the same. So, we will generate here one more div, .calc class and we will pass this class here. We have taken here width and height. We will take the background color for example, light blue, color blue. Okay. So, here we are getting another width div with our specified property, see here our line is a little long, so we are getting this big a line, as we have not applied br tags here. So, this is learnvern and the other line is starting from here. So, we will apply a few br tags here. Okay, so this is our property.(pause) Okay. So, this is the output that we are getting in which our width is getting calculated. As per em, which is our measurement to give length property and length value and our height is getting calculated in pixels. So, this is our 2^nd example of calculating width and height. So, guys, this is about how we can give width and height. But not only width and height, we can give many other properties. Like if we have to give font size, we can even give the font size in the same way. For example, then in this class we will give font size, font size, calc, now for example I want 20 pixels but I don’t want to pass directly. And if I write here 100 pixels minus 80 pixels. I can pass the font size also in the same way. Here I am getting 20 pixels font size. So, this is ours as to how we can pass these values using calc property. We can not only set width and height properties, there are also different properties in which we can pass integer values, there everywhere we can pass calc. We can make use of calc mostly if we want to perform calculation and get the answer. Only in that case we will do, not otherwise, otherwise we can also pass a fixed value. So, guys in today’s segment we saw about calc. How we can use calc property through our CSS whenever it is required. Based on the requirement we can use calc. Like we had said, for example initially we had said. If in one row, we have to set 4 input fields and I don’t know how much default width I require. In that case we can make use of calc. For example, we can even see that. If I take here some division or simple input field, input, type=test, that’s it, reload. Now you can see that there is one input field that is coming, placeholder, test. Okay. So, this is our input field that is coming. I want  such in total 4. Okay. Here I am getting 3 and the 4^th input field is falling down. If I want to set all four in one line, what will I do? In style, input, width, calc, 100% divide by 4 because I want 4 in one row. So, this is the answer that I am getting. You can see that, there are only 3 coming here, the 4^th one is not coming. This is because we have not left any margin. Margin default is getting minus from both the sides. That is the reason why our 4^th input field is not coming here. If in the place of 4, I make it 5, 100 % divide by 5 and I reload it. In one row, 4 of my input fields are getting set. So, this is the way, how we go ahead in this. How we set our required or desired output. If I do 100% divide by 5. The space that is there except for the margin. After deducting that much space, my 4 input fields are getting set. So, here if I make it 6, accordingly their width will be set and they will be smaller. And, maybe one more input field can be set. Okay, one more input field. As soon as I do divide by 6, I can set 5 input fields here. This was how in different ways we can make use of calc. How on the basis of different calculations we can set width, height, etc. So, guys, whatever we have learned in this segment about the calc, if you have any doubt related to this topic. You can tell us on forums.learnvern.com. We will rectify and revert to you with solutions on all your questions and queries. Our next segment is on CSS Visibility.