How to define variables in CSS?

In this blog, I will show you How to define variables in CSS?How to define variables in CSS?

Property names that are prefixed with --, such as --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

Syntax: var( --custom-name, value );

The var() function can be used in CSS to take the value of a variable.

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

-custom-name: This is a required parameter that accepts a custom property name starting with two dashes.
Value: This is an optional parameter. It accepts a fallback value that is used when the custom property is invalid.

For Example:

<!DOCTYPE html>
	<title>CSS Variables</title>
	:root {
		--color-green: green;
		--color-white: white;
	/* var() function used here */
	body {
		background-color: var(--color-green);
	h1 {
		color: var(--color-white);
	div {
		color: var(--color-white);

	<h1>Lorem Ipsum </h1>
	<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>


Hope this blog is helpful for you, Thanks for reading this blog.