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

Joined
May 20, 2024
Messages
1
Reaction score
0
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
 
Joined
Jul 4, 2023
Messages
398
Reaction score
44
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
HTML:
<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>

1716627424350.png
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,820
Messages
2,569,721
Members
45,509
Latest member
Danish324

Latest Threads

Top