What is CSS ?

CSS - Cascade Style Sheet helps to style your HTML elements.

CSS rules help to determine or define the HTML view, like alignment, color, spacing, height, width, background, fonts, and more.

We can write or define the CSS rules for HTML using CSS Selectors.

Learn More About CSS Selector & Etc Below

What is CSS Math Function?

CSS Math Functions allows performing a mathematical expression in CSS Property values.

CSS Math Function only supports plus ( + ) , minus ( - ) ,multiplication ( * ) , Division ( / ).

CSS have 3 Math Functions :

calc()
max()
min()

1) calc() Function

Syntax

calc(expression){codeBox}

The calc() function helps to perform calculations in CSS property values.

You can perform addition, subtraction, multiplication, division in CSS property values.

This calc() function is very useful for developing responsive design web pages and applications.

Example :

<div id="div-calc">
    Attractive Aurora - calc() Function
</div>

#div-calc {
font-size: 25px;
color: white;
padding: 5px;
background-color: #7400ff;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 100px);
}{codeBox}

In the above example, I used the calc() function in the width property.

I used calc(100% - 100px) as width property value.

above calc expression keep 100px space in all format , type of screen size.

Demo :

2) max() Function

Syntax

max(value1, value2, ...){codeBox}

The max() function allows to define one or more values to the one CSS property, and it chooses the max value from the given value.

The max() you can give multiple values by comma-separated.

Example :

<div id="div-max">
    Attractive Aurora - max() Function
</div>

#div-max {
background-color: #7400ff;
height: 100px;
padding: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: max(50%, 250px);
}{codeBox}

In the above example, I used the max() function in the width property.

I used max(50% - 250px) as width property value.

If you try to resize the browser screen or window, It will check the screen size and choose the max value from the given value. It will set the value as width to the element.

Demo :

CSS Math Functions That Every Developer Should Know

3) min() Function

Syntax

max(value1, value2, ...){codeBox}

The min() same as max().

The min() function allows to define one or more values to the one CSS property, and it chooses the min value from the given value.

The min() you can give multiple values by comma-separated.

Example :

<div id="div-max">
    Attractive Aurora - max() Function
</div>

#div-min {
background-color: #7400ff;
height: 100px;
padding: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: min(50%, 250px);
}{codeBox}

In the above example, I used the min() function in the width property.

I used min(50% - 250px) as width property value.

If you try to resize the browser screen or window, It will check the screen size and choose the min value from the given value. It will set the value as width to the element.

Demo :