how to css style according to a variable code example

Example 1: css set variable

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}

Example 2: css variable

...
<style>
	:root{
  		--couleur-principale: brown;
	}
	#test1{
		color:var(--couleur-principale);
	}
</style>
...