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

-1 vote300 views1 answer
Css font family for all titles
CSS
0 vote335 views1 answer
Jquery replace css class
CSS
0 vote295 views1 answer
What css vmin
CSS
0 vote289 views1 answer
CSS style all div elements
CSS
0 vote322 views1 answer
Increase the distance between paragraphs css
CSS
64 votes294 views6 answers
Center image html
CSS
58 votes307 views6 answers
How to center a div vertically and horizontally
CSS
38 votes288 views3 answers
Use CSS to set the background color of the document (body) to yellow.
CSS
0 vote335 views1 answer
Background url with color css
CSS
0 vote308 views1 answer
Spinner in html css react
CSS