Css variables

Css set variable

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

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

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

Css variables

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

Source: developer.mozilla.org

How to use variables in css

:root {
  --clr-primary-1: hsl(205, 86%, 17%);
}

.container{
  background-color: var(--clr-primary-3);
}

Similar codes

7 votes318 views2 answers
Input background color
CSS
0 vote310 views2 answers
Print to pdf setting css for A4 size
CSS
4 votes286 views3 answers
Background with image and gradient
CSS
4 votes291 views2 answers
Css trim text
CSS
1 vote274 views1 answer
Floating object animation css
CSS
0 vote336 views1 answer
How to set unclickable checkbox using css
CSS
13 votes276 views5 answers
How to add text stroke in css
CSS
134 votes315 views6 answers
Remove background from image
CSS
0 vote309 views1 answer
Css max-width none
CSS
8 votes307 views2 answers
CSS change image height
CSS