CSS_CUSTOM

Run
<!DOCTYPE html>
<html>
	<head>
		<title>CSS Custom Property</title>
		<style>
	:root {
	  --blue: #8afbff;
	  --black: #000000; 
	}

	body {
	  background-color: var(--blue);
	}

	h2 {
	  border-bottom: 2px solid var(--blue);
	}

	.container {
	  color: var(--blue);
	  background-color: var(--black);
	  padding: 15px;
	}

	.container button  {
	  background-color: var(--black);
	  color: var(--blue);
	  border: 1px solid var(--blue);
	  padding: 5px;
	}
	</style>
		<script>
	var r = document.querySelector(':root');
	function myFunction_get() {
	  
	  var rs = getComputedStyle(r);
	  
	  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
	}

	
	function myFunction_set() {
	 
	  r.style.setProperty('--blue', 'lightblue');
	}
	</script>
	</head>
	<body>
		
		<div class="container">
			<p>The CSS Custom Property is also known as CSS Variables or Cascading Variables which are defined by the CSS authors and designers. The custom property holds a specific value that can be reused anywhere in a document. 
			</p>
			<p>The custom property can be declared using a custom property name that begins with a double hyphen (--) and the value of this can be any valid CSS value. The custom property can be accessed using the var() function.
			</p>
			<p>
				<button>Yes</button>
				<button>No</button>
			</p>
		</div>
		<br>
			<button type="button" onclick="myFunction_get()">Get CSS Variable with JavaScript</button>
			<button type="button" onclick="myFunction_set()">Change CSS Variable with JavaScript</button>
		</body>
	</html>