CSS Custom Property
The large and complex website consists of a large amount of CSS code with a lot of repeated CSS properties. For example, the same color has applied to several elements and if we want to change that color then it becomes very difficult to search and replace a particular color from the document. To overcome this problem CSS Custom Property was introduced.
What is CSS Custom Property?
The CSS Custom Property is also known as CSS Variables or Cascading Variables which are defined by the CSS authors and designers. The custom property holds a specific value that can be reused anywhere in a document.
The custom property can be declared using a custom property name that begins with a double hyphen (--) and the value of this can be any valid CSS value. The custom property can be accessed using the var() function.
Note: It is good to define the custom properties using the :root pseudo-class so that they can be applied anywhere in the HTML document.
Syntax of Custom Property in CSS
The syntax for the CSS custom property is given below:
HTML element/selector {
/* CSS Property */
--main-bg-color: red;
}
Example: Custom Property in CSS
In the given example, we have created three custom classes --blue, --white, and --black within the :root pseudo-class so that we can use these custom properties anywhere in the HTML document. Then we have created two paragraphs using <p> element. In the end, we have set the styling properties for these two paragraphs using the CSS custom property and var() function. The values of the custom properties which can be one of the custom classes can be put within the parenthesis of the var() function.
<!DOCTYPE html>
<html>
<head>
<title>CSS Custom Property</title>
<style>
:root {
--blue: #85e1ed;
--white: #ffffff;
--black: #000000;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--black);
background-color: var(--white);
padding: 15px;
}
</style>
</head>
<body>
<h1>CSS Custom Property</h1>
<div class="container">
<p>The CSS Custom Property is also known as CSS Variables or Cascading Variables which are defined by the CSS authors and designers. The custom property holds a specific value that can be reused anywhere in a document.
</p>
<p>The custom property can be declared using a custom property name that begins with a double hyphen (--) and the value of this can be any valid CSS value. The custom property can be accessed using the var() function.
</p>
</div>
</body>
</html>
Output:
As we can see the specified CSS properties can be accepted by the HML elements.
CSS Overriding Variables
As we have learned above that the global variables can be accessed through the entire HTML document whereas the local variable can be accessed only within the selector in which it is declared. Suppose, if we want to specify any particular property for any element then we have to declare the custom property locally.
Example: CSS Overriding Variables
In this example, we have created two paragraphs using <p> elements and two buttons using <button> elements. Then, we have created three custom properties (--blue, --white, --black) within the root element and one locally with the same name (--blue) for button element but having a different value. Therefore, when we specify the custom property (--blue) for <button> element, it will take the value of the locally defined property instead of globally defined property.
<!DOCTYPE html>
<html>
<head>
<title>CSS Custom Property</title>
<style>
:root {
--blue: #85e1ed;
--white: #ffffff;
--black: #000000;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--black);
background-color: var(--white);
padding: 15px;
}
button {
--blue: #0000ff;
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
<h1>CSS Custom Property</h1>
<div class="container">
<p>The CSS Custom Property is also known as CSS Variables or Cascading Variables which are defined by the CSS authors and designers. The custom property holds a specific value that can be reused anywhere in a document.
</p>
<p>The custom property can be declared using a custom property name that begins with a double hyphen (--) and the value of this can be any valid CSS value. The custom property can be accessed using the var() function.
</p>
<div>
<button>Yes</button>
<button>No</button>
</div>
</div>
</body>
</html>
Output:
As we can see in the output image that the buttons accepted the value of the custom property --blue which is defined locally.
Change Variable with Javascript
We can change the CSS variables using JavaScript because the CSS variables have DOM access. JavaScript allows us to get the value of the custom property using getPropertyValue() function.
Example: Change CSS Variable with Javascript
In this example, we have demonstrated that how we can get the value of the custom property at run time using getPropertyValue() function.
Conclusion
In this lesson, we have learned how to create custom variables that can be used multiple times and reduce the code lines. Also, we have learned how to override their values using CSS and Javascript.
