This works as expected:
:root { --stop1: #aaaaaa; --stop2: #666666; }
#new-website
{
background-image: radial-gradient( ellipse at top right, var(--stop1), var(--stop2) );
}
However, what I would like to do it put the colour 'constants' in a separate 'colour.css' file. But this doesn't seem to work.
Can this be done? I thought the whole point of CSS variables was to allow things like colours to be placed in one central location. What am I doing wrong?
What I have tried:
I have tried changing the order of the stylesheet link references in the HTML file that uses this CSS.
I have also tried importing the 'colours.css' file into the stylesheet that defines the radial gradient, like this:
@import "colour.css";
#new-website
{
background-image: radial-gradient( ellipse at top right, var(--stop1), var(--stop2) );
}
In both these cases, the HTML document acts as though the colours are not found.