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>
<html>
<head>
	<title>CSS Variables</title>
	<style>
	: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);
	}
	</style>
</head>

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

Output:

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

eexpoundsofttechsolution

e