How to use variables in css

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

0 vote202 views2 answers
Make img black and white css
CSS
16 votes204 views4 answers
Arrow up css
CSS
0 vote203 views1 answer
Align items in span to center
CSS
18 votes193 views2 answers
Hand property css
CSS
0 vote214 views1 answer
Numpy not installling
CSS
34 votes220 views1 answer
Css middle and center align div
CSS
62 votes222 views3 answers
Border radius shorthand
CSS
0 vote224 views1 answer
Css cursor finger
CSS
23 votes197 views1 answer
What is shadow house about
CSS
20 votes197 views3 answers
Css text selection none
CSS