css variables

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: pink;
3}
4body {
5  background-color: var(--main-bg-color);
6}

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:root {
2  --background-color: #333;
3  --text-color: #fff;
4}
5body {
6  background-color: var(--background-color);
7  color: var(--text-color);
8}

1:root {
2  --first-color: #16f;
3  --second-color: #ff7;
4}
5
6#firstParagraph {
7  background-color: var(--first-color);
8  color: var(--second-color);
9}
10
11#secondParagraph {
12  background-color: var(--second-color);
13  color: var(--first-color);
14}
15
16#container {
17  --first-color: #290;
18}
19
20#thirdParagraph {
21  background-color: var(--first-color);
22  color: var(--second-color);
23}

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}