using css custom properties variables not working
You did everything right, just keep the variables in (put variable here)
element {
--main-bg-color: brown;
}
body {
background-color: var(--main-bg-color);
}
var()
notation works like a method
var(<custom-property-name>)
might consider putting your variables in a :root
selector...
:root {
--main-bg-color: brown;
}
/* The rest of the CSS file */
body {
background-color: var(--main-bg-color);
}
:root
is similar to global scope, but the element itself (ie body { --myvar: ... }
) or ancestor elements (ie html { --myvar: ... }
) can also be used to define variables