In the HTML webpage, when applying values to the CSS properties, the calculations are performed by using calc() function.
Syntax:
element {
// CSS property
property : calc( expression)
}
Properties: The calc() function takes parameters in the form of a single expression. The value becomes the result of the expression. Even the expression be the combination of many operators follow the standard precedence rules.
- + Addition
- – Subtraction
- * Multiplication. Any of the arguments should be a number
- / Division. The right-hand side should be a number
One must be careful while writing the syntax and must take care of the following points.
- The + and – operator must be surrounded by white space i.e. height(100%-30px) is considered to be invalid but height(100% – 30px) is a valid expression. For the / and * operator, the white spacing is not necessary but is highly recommended.
- Division by 0 results in an error.
Example 1:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS Calc Viewport Units Workaround
</title>
<style>
body {
background-color: rgb(30, 240, 30);
}
h1 {
color: rgb(30, 240, 30);
}
div {
width: calc(100% - 100px);
/* Using the calc() func to change the
width of the div element by 100px */
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>working of the calc() function</h1>
</div>
</body>
</html>
|
output:
Example 2:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS Calc Viewport Units Workaround
</title>
<style>
body {
background-color: rgb(30, 240, 30);
}
h1 {
color: rgb(30, 240, 30);
/* Using the calc() func to change
the font size of the h1 element */
font-size: calc(1.5rem + 3vw);
}
div {
width: calc(100% - 100px);
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1> working of the calc() function</h1>
</div>
</body>
</html>
|
Output: