calc() Function with Example in CSS

CSS | calc() function: Here, we are going to learn about the calc() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 17, 2020

Introduction:

Dealing and appending functions to our HTML/CSS code has become a daily feat but not everyone is a pro when it comes to developing websites or web pages. Therefore, one must never stop learning and keep looking for sources from where you can acquire new knowledge.

Same is the case with functions, there are numerous functions out there for HTML/CSS which you can use while developing a website or web pages. If you are thinking that you can’t happen to know all the functions, well that is only correct because no one can know all the functions as new functions are being developed as time passes by. So, keep learning about new functions and properties that would prove to be very helpful when you start developing websites or web pages. Now, let us move forward and talk about one very specific function known as calc() Function.

Definition and usage:

Well, first and foremost let us have a look at the definition of this function.

As the name suggests, this function is used for calculation when appended in your CSS code, this function helps in performing calculation as a property. The calc() function allows mathematical expressions with +,-,* and /. Well as easy as the definition sounds, so is the implementation of this function. For a better understanding of this function, why don’t we have a look at the syntax of this function:

Syntax:

    element{
        width : calc(length %-length px);
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        img {
            position: relative;
            width: calc(80% - 80px);
            padding: 30px;
        }
    </style>
</head>

<body>
    <img src="img_forest.jpg" width="240" height="184" />
</body>

</html>

Output

After resizing the screen size:

In the above example, calc() function is applied to the width of the image.

As you can see from the syntax the implementation is quite easy and not much line of codes are required when appending this property. Functions like these prove to be very useful when we want to avoid long lines of codes that in turn helps in code optimization. The code does not take many lines which makes it easier for a third person to understand your code. You should make use of such functions as it is a very good practice and it also shows how much knowledge you have regarding web development and how well you can implement it. A good developer is one who makes use of all the available knowledge and that knowledge is reflected in his/her project.

Conclusion:

So, why wait? Go ahead and start using your new learned function and don't hesitate to try it with new values so that you can get to understand this function much more clearly and you will be able to imply this function to your code with ease. Never stop learning new values, properties, and functions if you want to be a good professional developer.

If you need a helping hand, our team of skilled developers is always there to help you at https://ask.includehelp.com/.

CSS Functions »

CSS | hsl() Function

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples