What are CSS Custom Properties ?

Last Updated : 13 Sep, 2021

In this article, we will learn about CSS custom properties & their implementation. CSS custom properties are also referred to as CSS variables or cascading variables. These entities contain specific values that will be reused in the entire document & can be accessed using the var() function (e.g., color:(–primary-color);). The property name which has a prefix as –, depicts the custom properties & their value will be used in other declarations using the var() function.

Generally, when we are styling a large website that may contain a huge amount of CSS properties & most probably we have used similar values multiple times. It is really hard to manage the large-size styling properties. In order to handle this, custom properties allow us to declare a variable in one place, can be referred to multiple other places. This will reduce the effort to manage the code because we can update values easily by making changes in a single place.

Syntax:

For variable:

var( --custom-name, value )

Parameters: The var( ) function accepts two parameters which are listed below:

–custom-name: It is a required parameter that accepts the custom property name.
value: It is an optional parameter. It accepts a fallback value which is used when the custom property is invalid.

Syntax:

For custom properties:

--custom-name: values;

The value assigned to the custom property will be matched for any sequence of one or more tokens until the sequence breaks & does not contain any more valid tokens.

We will create some CSS variables & define the value of these CSS variables, use them to style the HTML components.

Example 1: In this example, we will create CSS variables for background color, primary font color, and heading property.

HTML

<!DOCTYPE html> 
<html> 
   
<head> 
    <style> 
       
        /* Declare CSS custom properties  
        or CSS variables */ 
        :root { 
            --background-color: #dee1e3; 
            --primary-font-color: #302AE6; 
            --heading-color: #14ac60; 
            --link-color: #093aeb; 
        } 
      
        body { 
            background-color: var(--background-color); 
        } 
      
        h2 { 
            color: var(--heading-color); 
        } 
      
        p { 
            color: var(--primary-font-color); 
        } 
      
        a { 
            color: var(--link-color); 
        } 
    </style> 
</head> 
   
<body> 
    <h2>GeeksForGeeks</h2> 
    <p>A Computer Science portal for geeks.</p> 
   
    <a href="http://geeksforgeeks.org">click here</a> 
</body> 
   
</html> 

Output:

Example 2: In this example, we will use the box-shadow-color property to create the shadow effect while hovering on it.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            background-color: #abb0b3; 
            color: #0f5e1b; 
        } 
  
        #click { 
            border-radius: 50px; 
            display: inline-block; 
            font-size: 35px; 
            padding: 10px; 
            transition: box-shadow 1.2s; 
        } 
  
        #click { 
            box-shadow: 0 0 40px var(--box-shadow-color); 
            --box-shadow-color: palegoldenrod; 
        } 
  
        #click:hover { 
            --box-shadow-color: #57ab57; 
        } 
    </style> 
</head> 
  
<body> 
    <h4>Hover me to see the effect</h4> 
    <h2 id="click">GeeksforGeeks</h2> 
</body> 
  
</html> 

Output:

Example 3: To understand the importance of CSS custom properties, we will create a web page where we change the theme of the container just by using CSS custom properties along with some normal JavaScript.

First, we will define some styling properties for the dark theme and the light theme. By default, we set the theme of the container as dark. We will also use theme CSS custom properties to set the style for our HTML webpage elements.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        :root { 
            --background-color: #000; 
            --primary-font-color: #302AE6; 
            --heading-color: #14ac60; 
            --link-color: #ae2ab3; 
        } 
  
        /* Light theme */ 
        [theme="light"] { 
            --background-color: #eee; 
            --primary-font-color: #000; 
            --heading-color: #303030; 
            --link-color: #302AE6; 
        } 
  
        .container { 
            background-color: var(--background-color); 
            height: 400px; 
            width: 300px; 
            border: 2px solid green; 
        } 
  
        h1 { 
            color: var(--heading-color); 
        } 
  
        p { 
            color: var(--primary-font-color); 
        } 
  
        a { 
            color: var(--link-color); 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div class="container"> 
            <h1>GeeksForGeeks</h1> 
  
            <p>A Computer Science portal for geeks.</p> 
  
            <a href="http://geeksforgeeks.org">click here</a> 
        </div><br> 
        <label class="checkbox-theme" for="checkbox"> 
            Check the checkbox to change theme 
            <input type="checkbox" id="checkbox" /> 
        </label> 
    </center> 
  
    <script> 
        const Switch = document.querySelector( 
            '.checkbox-theme input[type="checkbox"]'); 
  
        /* Function to change theme*/ 
        function changeTheme(e) { 
            if (e.target.checked) { 
                document.documentElement 
                    .setAttribute('theme', 'light'); 
            } 
            else { 
                document.documentElement 
                    .setAttribute('theme', 'dark'); 
            } 
        } 
        Switch.addEventListener( 
            'change', changeTheme, false); 
    </script> 
</body> 
  
</html> 