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 vote169 views1 answer
Remove glow textarea css
CSS
0 vote200 views1 answer
Change size material checkbox
CSS
-1 vote168 views1 answer
Flex wrap tailwind
CSS
0 vote195 views1 answer
How to style navbar-toggler-icon bootstrap 5
CSS Bootstrap
76 votes169 views6 answers
Css flexbox
CSS
0 vote183 views1 answer
Media queries import file
CSS
3 votes138 views1 answer
Terraform rds module
CSS
-1 vote188 views1 answer
How to remove default styling of a tag
CSS
0 vote169 views1 answer
Typora rtl
CSS
6 votes169 views2 answers
Css grid full width row
CSS