What are CSS Custom Properties ?
Last Updated :
24 Jul, 2024
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:
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:
--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:
The first output appears on the output screen and the second output shows when it click to the button
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>
Output:
While click to checkbox button, you get the changes on element –
Supported Browsers:
- Google Chrome 49.0
- Microsoft Edge 15.0
- Firefox 31.0
- Safari 9.1
- opera 36.0
Similar Reads
What are the usage of "table-layout" property in CSS ?
In this article, we are going to learn the usages of the table-layout property in CSS, The table-layout property in CSS specifies the layout of the table which consists of table cells, rows, and columns. It can have two values: "auto," which allows the table to adjust its layout based on content, an
3 min read
CSS | Shorthand Properties
Shorthand properties allow us to write multiple properties in a single line and in a compact way. They are useful as they provide clean code and also decrease the LOC (Line of Code). The Shorthand properties we will be covering: BackgroundFontBorderOutlineMarginPaddingList Background: The CSS Backgr
4 min read
CSS border-left-width Property
The border-left-width property in CSS specifies the width of an element's left border. You can set this width using various units like pixels, ems, or percentages. This property allows for precise control over the left border's thickness, contributing to the element's overall design and layout. Synt
4 min read
SVG Properties In CSS
SVGs are XML-based vector images that are widely used on the web. It is not made of pixels. SVGs are composed of paths defined by mathematical equations. This allows them to scale infinitely without losing quality. We will learn What are SVG properties in CSS and how to work with SVG properties in C
7 min read
CSS font-weight Property
The CSS font-weight property is used to set the weight or thickness of the font used with HTML text. The font-weight applied will depend on the font family used and the browser. Some font families are available only in specific weights. Understanding how to use the font-weight property effectively c
5 min read
What are custom attributes in HTML5 ?
Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our information to HTML tags. These attributes store private information specific to a page or application, providing a way to add custom data to HTML elements Any att
3 min read
CSS border-width Property
The border-width property in CSS sets the width of an element’s border. You can specify a single width for all four sides or define different widths for each side (top, right, bottom, and left). This property is crucial for creating visually appealing borders and enhancing the layout of your web pag
5 min read
CSS max-width Property
The max-width property in CSS defines the maximum width an element can occupy, ensuring that it doesn't exceed a specified width. This property plays a crucial role in responsive design, allowing the content to adjust within a defined limit. It helps in creating flexible layouts that look great on v
4 min read
What is float property in CSS ?
In this article, we will learn about CSS float property with suitable examples of all available attributes. The float property is used to change the normal flow of an element. It defines how an element should float and place an element on its container's right or left side. The general syntax of the
3 min read
CSS list-style Property
The list-style property in CSS is used to set the list style. the CSS list-style property is a shorthand for setting the list-style-type, list-style-position, and list-style-image properties in one declaration. It defines the appearance of list item markers, including their type (e.g., disc, circle)
3 min read