add variable in css code example

Example 1: css set variable

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

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

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

Example 2: css variable

:root {
  --main-bg-color: pink;
}
body {
  background-color: var(--main-bg-color);
}

Example 3: css variables

:root {
  --background-color: #333;
  --text-color: #fff;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Example 4: create variable in css

:root {
  --tab-count: 5;
}

#div1 {
  width: calc(100% - var(--tab-count));
}

Example 5: how to use variables in css

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

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