The color rule I coded in CSS doesn't go the same with HTML

[Hue Tran]

Hi guys, I would like to ask your help to point out my mistake. Here's my problem:
- in the CSS file, I make a rule color like this:
:root{
--primary: #808080;
--secondary: #fe8800;
--light: #f5f5f5;
--dark: #14141f;
}

but when I move to HTML, that rule doesn't apply on it. For example, if I want the text is gray (like is determined in CSS), I should type: text-primary. But in this case, the color of the text is blue, and when I type text-secondary (the color should be orange like is determined in CSS), but the text here Is gray

 

[VBService]

You didn't provide all the code you're having trouble with, so I can only guess what the problem is.
If you want to type "text-primary" exactly, you should create another css variable or class as the name you want to use.

Check this

<style>
  :root{
    --primary: #808080;
    --secondary: #fe8800;
    --light: #f5f5f5;
    --dark: #14141f;
    
    --text-primary: var(--primary);
    --text-secondary: var(--secondary);
  }
  body {
    color: blue;
  }
  
  .text-primary {
    color: var(--primary);
  }
  .text-secondary {
    color: var(--secondary);
  }  
</style>

<p>Lorem</p>
<p style="color: var(--primary)">Lorem 1</p>
<p style="color: var(--secondary)">Lorem 2</p>
<p>Lorem</p>
<p style="color: var(--text-primary)">Lorem 1</p>
<p style="color: var(--text-secondary)">Lorem 2</p>
<p>Lorem</p>
<p class="text-primary">Lorem 1</p>
<p class="text-secondary">Lorem 2</p>