Basic Arithmetic

The basic arithmetic CSS Math function is calc().

calc() Function: It performs all the basic calculations on numeric values.

calc( Expression )

Example: In this example, we will use calc() CSS Math Function.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale="> 
    <title>Calc Function</title> 
    <style> 
        .parent { 
            background-color: rgb(137, 235, 135); 
  
        } 
  
        .heading { 
            left: 30px; 
            width: calc(50% - 100px); 
            height: 100px; 
            background-color: #6bcf57; 
            padding-top: 20px; 
            text-align: center; 
        } 
  
        h2 { 
            color: #e9e8e9; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="parent"> 
        <div class="heading"> 
            <h2> 
                  Welcome to w3wiki. 
              </h2> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

CSS Math Functions

In this article, we will learn about the CSS Math Functions. CSS Math Functions enable you to express CSS numeric values using mathematical expressions directly in your stylesheets. By using CSS Math Functions, we achieve greater flexibility and ease in creating responsive layouts and styling elements. We can use calc(), max(), and min() math functions to make our work easy.

CSS Math Functions are classified into the following types:

Basic arithmetic
Comparison functions
Trigonometric functions
Exponential functions
Sign-related functions
Stepped value functions

Tags:

#CSS-Functions #CSS #Web Technologies

Comparison Functions

Basic Arithmetic

HTML

CSS Math Functions

Similar Reads

Contact Us