1:root {
2 --main-bg-color: coral;
3}
4
5#div1 {
6 background-color: var(--main-bg-color);
7}
8
9#div2 {
10 background-color: var(--main-bg-color);
11}
1:root {
2 --main-bg-color: brown;
3 }
4
5.uno {
6 color: white;
7 background-color: var(--main-bg-color);
8 margin: 10px;
9 width: 50px;
10 height: 50px;
11 display: inline-block;
12}
1/* "css variables" */
2/* not for ie but good for Edge and other browser :D */
3
4/*
5 By declaring a custom property on the :root pseudo-class
6 and using it where needed throughout the document
7*/
8:root {
9 --primary-bg: #8a2be2;
10 --btn-font-size: 18px;
11 --btn-padding: 10px 15px;
12}
13
14.btn-primary {
15 background-color: var(--primary);
16 font-size: var(--btn-font-size);
17 padding: var(--btn-padding);
18 color: #E2E2E2;
19}
1...
2<style>
3 :root{
4 --couleur-principale: brown;
5 }
6 #test1{
7 color:var(--couleur-principale);
8 }
9</style>
10...
1:root {
2 --blue: #1e90ff;
3 --white: #ffffff;
4}
5
6body { background-color: var(--blue); }
7
8h2 { border-bottom: 2px solid var(--blue); }
9
10.container {
11 color: var(--blue);
12 background-color: var(--white);
13 padding: 15px;
14}
15
16button {
17 background-color: var(--white);
18 color: var(--blue);
19 border: 1px solid var(--blue);
20 padding: 5px;
21}
1:root {
2 --clr-primary-1: hsl(205, 86%, 17%);
3}
4
5.container{
6 background-color: var(--clr-primary-3);
7}
8