Can I use root variables in my CSS file rather than the style blocks in HTML?

HTML-CSS
1

I understand that this :root situation works like a class between HTML <style> tabs but is there a way I can put it in my CSS file and have it actually work?

Here I attempted to change text to red via variables
root4

It didn’t work
contactme3

Here’s the link to my actual code https://code.sololearn.com/WIWJvKsVl4hq/#css

2

The variable contains the value, in your case red. You are not using the value on any property.

:root {
  --main-red: red;
}

h1 {
  color: var(--main-red);
}

header {
  background: var(--main-red);
}

nav {
  border-bottom: 2px solid var(--main-red);
}