Everything about css variable & calc

What is Variable?

Suppose we used red color in five place. Now if we want to change red color into green color then normally we have to go to each place where we wrote red and then have to remove red color and type green color. This thing takes a lot of time. What if we create a variable and then write red color inside that variable and then to give color, previously where we wrote red there we will write the variable name. Now if we need to change the red into green then we don't need to go to each place, we have to just go to the variable and there we have to remove red and then write green. If we do that then each place red will change into green.

How to write variable?

:root{
--variable_name:value;
}

How to use variable?

.first{
color:var(--variable_name);
}

You can not give space between variable name. You can use under score.

We can create multiple variable inside root.

How to write variable:

:root{
--variable_name_1:value;
--variable_name_2:value;
}

<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
    :root{
        --color_name_for_h3_tag:red;
        --color_name_for_p_tag:green;
        --font_size_of_p_tag:50px;
        --font_size_of_h3_tag:70px;
    }
    .A{
        color:var(--color_name_for_h3_tag);
        font-size: var(--font_size_of_h3_tag);
    }
    .B{
        color:var(--color_name_for_p_tag);
        font-size: var(--font_size_of_p_tag);;
    }
</style>
</head>
<body>

<h3 class="A">This a website for free learning</h3>
<p class="B">
    You can learn free and can reach your dream
</p>

</body>
</html>

CSS calc() function

For doing mathematical calculation we use calc() function. Suppose we want to set a box width and that is from total width of screen we want 50px less. But we don't know the total width of screen.
In this case we can write
Width:calc(100%-50px);
It's means take 50px less from total width of the screen. The calculation will be done by the calc() function

Some other examples are:
Background-position:calc(100%-50px) calc(100%-2px);
font-size:calc(100%-200px);
border:calc(50-40) red solid;

CodersAim is created for learning and training a self learner to become a professional from beginner. While using CodersAim, you agree to have read and accepted our terms of use, privacy policy, Contact Us