CSS variables & their features

CSS is adopting many features by the passage of time. Here, we will see that what CSS Variable is & it's benefit of usage. If you're familiar with computer programming background you have noticed about work & need of variables eg. var = 10;

What is variable?

A variable is kind of space we occupy in memory while declaring it.

Why we use Variable?

If you want to do something like plus ➕ two things or apply any mathematical operation eg. var a=10; var b=10; c=a+b; now, variable c has value of a & b. which is equal to c=20
don't worry! every language has its own syntax for declaring variable but I have used here javaScript syntax.
Let's focus on CSS Variable,

What is CSS Variable?

CSS Variable is not rocket science. It works the same as we use other programming language variables but we can't apply any mathematical operation like + - * /on CSS variable. we just use to take a space in memory by declaring any CSS property as memory address & property's value as a memory address value. that's it.

Why we use CSS Variable?

To understand this question, first we have to see visual answer.

We can see I have declared my CSS variable in :root because it will apply to all root HTML which means whole HTML document more simple :root is the parent element of the HTML page and inside the root, you can see more about parent and child elements in HTML-DOM in my another article HTML-DOM manipulation, I have declared CSS variable & now it will apply to all it's children. You can also declare CSS variable in another parent/location like,

Here we have declared our CSS variable in my-container & it is parent which means my-container has child elements that's why it is parent. see in picture below,

Above, my-container has its own element so if we declare CSS variable in my-container it will work on only its child element which are, <p> & <h4> but it will not work on body <p> I'm Child of body and my ancestor is root of HTML</p> because this <p> is not child of my-container. For applying CSS variable body <p> element, we must target its parent (body OR root)
eg. :root{--my-variable: #ddd} here #ddd is the code of a color.

Syntax to declare CSS varible

Syntax is not very difficult just you have to remember just two things

-- it is part of declaring CSS variable eg. (--xyz: abc)
var() while using it. now see some CSS variable examples You have noticed that I have only changed the value eg. 18px of property font-size.

Bullet Points:

While declaring CSS Variables we just set the value eg. 18px , #0001, "Times New Roman", Georgia, Serif; but the property name will remain same while using it.
Here background-color: var(--my-background-color); background-color property name of CSS will ramain as it as but it's value now become dynamic var(--my-background-color); instead of #0001.

Benefit of Using CSS Variable

Using CSS Variables we made our code dynamic.
Let's suppose you have written HTML & CSS with thousands of lines and after all, you want to change your CSS code eg. all <p> & <h1> color & font-size then What you will do?
definitely, you have to change all lines where you have declared CSS property value & this become a time-consuming process. To counter these problem CSS Variables were introduced for changing your property's value just in seconds by changing only 1 value of the property. Now see the real-world example,

Do you notice that --my-p-color is applied on all <p> elements which are children of <body> tag & --my-font-size just applied to its child which is <p>I'm Child of my-container & my ancestor is body</p> beasuce --my-font-size is declared in .my-containerthat's why it works on only its child element. That's all about CSS Varibles. Hope now you are familiar with CSS Varibles.

Blog