What are the Variables in CSS? Create Variables in CSS

What are the Variables in CSS? Create Variables in CSS

What are the Variables in CSS? Create Variables in CSS

What are the Variables in CSS? Create Variables in CSS
What are the Variables in CSS? Create Variables in CSS

 

What are the Variables in CSS?

A variable is used in many programming languages, variables are the containers in computer programming to store values. Variables are the building blocks of all computer programs because they allow computers to store, use, and alter data.

Since CSS is a style sheet, it is different than the programming languages like C, C++, Java, Python, etc.

Thus, CSS variables are unique style variables that can be used anywhere in a CSS document.

When writing a CSS declaration, you usually start with the property, which is the style that the declaration is targeting, and then the value, which is the type of styling that will be applied. Then this declaration is linked to a CSS selector. For instance:

div { background-color: green; }

For a long time, this was the only possible method of assigning values to properties in plain CSS. Before the release of the CSS variables, if you wanted something similar to variables in CSS, you would need to use a CSS preprocessing language like Sass (which is incorporated into frameworks like Bootstrap).

3D Card Hover Effect Using HTML and CSS

However, CSS variables now provide an alternative to an add-on solution for the styling of our website elements. CSS variables, also known as custom properties, allow us to define our own custom values, making our code easier to read and change.

Declaring Variables in CSS

Before using a CSS variable, we first have to declare one. We can assign any value to a CSS variable.

To declare a CSS variable, write it inside a rule set, similar to any other CSS declaration. However, the difference is that the property of a CSS variable always has two dashes as its prefix, followed by a name you assign it.

p {
--text-color: #ff7b58;
}

Note: Custom property names are case-sensitive. A CSS variable named –text-color will be interpreted differently from –Text-Color. Hence, it is better to avoid capital letters in your variable names to prevent such confusion.

var() function In CSS

We use var() function to apply our CSS variables to the HTML page. Functions are often used in programming, a function is used to perform a certain task/procedure.

How to Create a Weather App using JavaScript

Here in CSS, the var() function is used to find a particular CSS variable and apply it to a selector.

p {
--text-color: #ff7b58;
color: var(--text-color);
}

In the example, the var() function finds the value of the –text-color custom property that we made, then applies this value (#ff7b58) to the color of any text inside a <p> tag.

In case the CSS variable doesn’t work due to a typo, or the failure of the browser to render the value you specify for your variable. We can also write a fallback value inside var().

A fallback value is written inside var() after the CSS variable, separated by a comma ‘,’.

{ color: var(--text-color, red); }

Inheritance

Inheritance is the property of OOP where the child element inherits the properties and methods of its parent element.

Create Simple Portfolio Website Using HTML and CSS

Just like with normal CSS, child elements inherit the CSS variable values of their parent elements; unless the parent value is overwritten in the child element.

We can use inheritance and declare CSS variables for global scope, thus making it available for every element.

:root {
--background-color: #93e9be;
--text-color: #ff7b58;
}

div {

background-color: var(--background-color);
}

#section-1 {
color: var(--text-color);
}

Scope and CSS Root Variables

The scope of a variable specifies where it will work based on where it is declared. A CSS variable can have either local or global scope.

Local CSS variables only work within the selector in which they are defined. Whereas, Global CSS variables work across an entire document.

ADVERTISEMENT

Restaurant Website Using HTML and CSS

ADVERTISEMENT

We create global CSS variables by writing their rules for the :root selector, which applies to the HTML document object model’s topmost element, <html> — which contains all the other elements.

ADVERTISEMENT

Note: While CSS variables can be declared in any CSS selector, it’s usual practice to declare all or most CSS variables in :root to ensure that they work across the document.

ADVERTISEMENT

Conclusion

ADVERTISEMENT

Once you’ve grasped the fundamentals of CSS, adding CSS variables to your programming vocabulary will save you a lot of time in the future. It’s beneficial to format your CSS in a way that can be read and adjusted quickly and smoothly.

written by @ankit Joshi



Leave a Reply