CSS – Custom Properties
”; Previous Next
Custom properties use names that start with —, such as –color-name. These properties can store values, which can then be used in other elements using the var() function.
Custom properties are specific to elements, and their values follow the cascading rules, the value of a custom property is determined by the cascading algorithm.
Possible Values
<declaration-value> − This value can be any combination of tokens, but it must not include certain disallowed tokens. It specifies what a valid declaration can have as its value.
Applies To
All the HTML elements.
Syntax
–keywordValue: right;
–colorValue: #e74c3c;
–complexValue: 5px 10px rgb(238, 50, 17);
When defining custom properties with “–“, remember they are case sensitive. “–my-color” and “–My-color” will not have the same value, they are separate variables.
CSS Custom Properties – Commas in Values
The following syntax shows how to use multiple values using commas. The transform: scale(var(–scale, 1.1, 1.5)) property defines the first comma, which separates the fallback, and the second comma, which is a value −
button {
transform: scale(var(–scale, 1.1, 1.5));
}
CSS Custom Properties
The following example demonstrates the use of custom properties −
<html>
<head>
<style>
:root {
–red-color: red;
–green-color: rgb(125, 226, 31);
}
div {
width: 200px;
height: 100px;
margin: 10px;
}
.box1 {
background-color: var(–green-color);
color: var(–red-color);
}
.box2 {
background-color: var(–red-color);
color: var(–green-color);
}
.box3 {
–pink-color: rgb(247, 30, 193);
}
.box3 p {
color: var(–pink-color);
}
</style>
</head>
<body>
<div class=”box1″>
Green Background, Red Text
</div>
<div class=”box2″>
Red Background, Green Text
</div>
<div class=”box3″>
<p>Pink Text</p>
</div>
</body>
</html>
CSS Custom Properties – Setting Value
The following example demonstrates that custom property”s value can be set using another custom property −
<html>
<head>
<style>
html {
–red-color: #e92424;
–green-color: #2c1fdd;
–yellow-color: #f6f867;
–back: var(–yellow-color);
–para: var(–green-color);
–border: var(–red-color);
}
div {
width: 200px;
height: 150px;
padding: 10px;
background-color: var(–back);
border: 3px solid var(–border);
}
h3 {
color: var(–green-color);
text-align: center;
}
p {
color: var(–para);
}
</style>
</head>
<body>
<div>
<h3>Tutorialspoint</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text.</p>
</div>
</body>
</html>
CSS Custom Properties – Splitting Colors
The following example demonstrates that when you hover over the box, the background color is changed by modifying the values of –h, –s, –l, and –a −
<html>
<head>
<style>
.box {
width: 150px;
width: 150px;
padding: 10px;
–h: 0; /* hue */
–s: 70%; /* saturation */
–l: 50%; /* lightness */
–a: 1; /* alpha */
background-color: hsl(var(–h) var(–s) var(–l) / var(–a));
color: white;
}
.box:hover {
–l: 75%;
}
.box:focus {
–s: 75%;
}
.box[disabled] {
–s: 0%;
–a: 0.5;
}
</style>
</head>
<body>
<div class=”box”>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text.
</div>
</body>
</html>
CSS Custom Properties – Shadow
The following example demonstrates box shadow effect with –shadow value. The box shadow is initially 2px, but when you hover over it, the shadow increases to 10px −
<html>
<head>
<style>
.box {
width: 150px;
width: 150px;
padding: 10px;
margin: 30px;
–shadow: 2px;
background-color: aqua;
box-shadow: 0 0 20px var(–shadow) red;
}
.box:hover {
–shadow: 10px;
}
</style>
</head>
<body>
<div class=”box”>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text.
</div>
</body>
</html>
CSS Custom Properties – Gradients
The following example demonstrates that the box with gradient background transitioning from green to yellow to red. The gradient angle is initially 90deg, but when you hover over it, gradient angle changes to 180deg −
<html>
<head>
<style>
.box {
width: 150px;
width: 150px;
padding: 10px;
margin: 30px;
–gradient-angle: 90deg;
background: linear-gradient(var(–gradient-angle), green, yellow, red);
}
.box:hover {
–gradient-angle: 180deg;
}
</style>
</head>
<body>
<div class=”box”>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text.
</div>
</body>
</html>
CSS Custom Properties – Grid
The following example demonstrates the grid layout where the width of column changes based on the the screen width. The value of the –boundary is initially 30px, but when you resize the browser window, the –boundary value changes to the 40% of the container width −
<html>
<head>
<style>
.box {
background-color: lightcoral;
display: grid;
–boundary: 30px;
grid-template-columns: var(–boundary) 1fr var(–boundary);
}
@media (max-width: 800px) {
.box {
–boundary: 40%;
}
}
</style>
</head>
<body>
<div class=”box”>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry”s standard dummy text.
</div>
</body>
</html>
CSS Custom Properties – Transforms
The following example demonstrates the transform effect using custom properties. When you hover over a button, it scales down to 80% of its original size, and when you click it, it moves down 3px −
<html>
<head>
<style>
button {
transform: var(–scale-button, scale(1)) var(–translate-button, translate(0));
padding: 10px;
background-color: yellow;
}
button:active {
–translate-button: translate(0, 3px);
}
button:hover {
–scale-button: scale(0.8);
}
</style>
</head>
<body>
<button>
Tutorialspoint
</button>
</body>
</html>
CSS Custom Properties – Concatenation of Unit Types
The following example demonstrates how to use CSS custom properties to dynamically set the font size. The calc() function calculates the size by multiplying the custom properties –size-val and –pixel-values −
<html>
<head>
<style>
html {
–size-val: 24;
–unit-val: px;
font-size: var(–size-val) + var(–unit-val);
font-size: calc(var(–size-val) * 1px);
–pixel-values: 1px;
font-size: calc(var(–size-val) * var(–pixel-values));
}
.box {
width: 200px;
height: 150px;
background-color: yellowgreen;
}
</style>