I've been trying to use CSS variables recently into a very simple code. It actualy did not work. I double checked the informations I found about how to use variables but I can't find my mistake. Maybe am I doing something wrong ?
:root {
--my-color: red;
}
body {
background-color: var(--my-color);
}<!DOCTYPE html><html><head><title>My title</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="./style/mainPage.css"><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body><div class="row"><div class="col-sm-12"><h1>HELLO WORLD</h1></div></div></body></html>I left the <head> in case of some <link> are not compatible with the utilisation of css variables.
With this code, the background-color stays white. If I do not use a variable instead, it changes accordingdy. Am I missing something ?
Thanks for your help.