Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

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:

</>
CSS:
: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 grey (like is determined as primary 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 grey
 
What do you mean when you say you type text-primary? Is that a class name, or an attribute, or what?

What you have in your CSS are CSS variables, so you'll use it in CSS like this:
CSS:
.some-text {
  --some-colour: #ff0000;     /* define the variable */
  color: var(--some-colour);  /* use the variable */
}
 
</>
What do you mean when you say you type text-primary? Is that a class name, or an attribute, or what?

What you have in your CSS are CSS variables, so you'll use it in CSS like this:
CSS:
.some-text {
  --some-colour: #ff0000;     /* define the variable */
  color: var(--some-colour);  /* use the variable */
}

For example:
1. In case one, I want the background is grey as determined in CSS like this
CSS:
:root{
    --primary: #808080;
    --secondary: #fe8800;   
    --light: #f5f5f5;
    --dark: #14141f;   
}

then in HTML, I do this
HTML:
<div class="container-fluid bg-primary py-5 mb-5 hero-header">
            <div class="container py-5">
                <div class="row justify-content-center py-5">
                    <div class="col-lg-10 pt-lg-5 mt-lg-5 text-center">
                        <h1 class="display-3 text-white mb-3">Enjoy Your Vacation With Us</h1>
                        <p class="fs-4 text-white mb-4">Your future depends on yours choices</p>
                        <div class="position-relative w-50 mx-auto">
                            <!--input box-->
                            <input type="text" class="form-control border-0 rounded-pill w-100 py-2 ps-4 pe-5" placeholder="Eg: Hoi An">
                            <button type="button" class="btn btn-dark rounded-pill py-1 px-3 position-absolute top-0 end-0 me-1" style="margin-top:3px;">Tìm Kiếm</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

So, when I type "bg-primary" in HTML, the background color I expected is grey, not blue like this (please check the Img of Case 1 I attached)


2. and another case for the text, in write in HTML like thí
HTML:
<div class="text-center pb-4">
                    <h5 class="section-title bg-white text-center text-primary px-3">Process</h5>
                    <h3 class="mb-5">Easy Steps</h3>
</div>

So, when I type "text-primary" in HTML, the text color I expected is grey, not blue like this (please check the Img of Case 2 I attached)
 

Attachments

  • case 1.jpg
    case 1.jpg
    87.6 KB · Views: 2
  • Case 2.png
    Case 2.png
    12.9 KB · Views: 2
Are you using TailwindCSS?
This appears to be Bootstrap if I'm not mistaken.

@Hue Tran, it appears you're trying to use CSS variables directly within your HTML document. I like the idea; however, this won't work as expected. CSS variables work within the CSS file itself or within the <style></style> tags, similar to what @Johna mentioned:

What do you mean when you say you type text-primary? Is that a class name, or an attribute, or what?

What you have in your CSS are CSS variables, so you'll use it in CSS like this:
CSS:
.some-text {
  --some-colour: #ff0000;     /* define the variable */
  color: var(--some-colour);  /* use the variable */
}

When you use a framework like Bootstrap and add predefined names to the HTML tag class="" attribute, e.g., bg-primary-subtle. You are applying styles that the Bootstrap developers have predefined.

With that said, if you want to use your CSS variable to adjust the colour of the element, you'll need to either edit the predefined class or add an additional class name (recommend the latter), e.g. <div class="bg-primary-subtle myNewAdditionalClassName">, then in your CSS, create a statement for that particular class name using your CSS variable; here's an example:
CSS:
.myNewAdditionalClassName {
   background-color:  var(--primary);
}

You should now see the colour change for the element you have set in your CSS variable.

Hope that helps!
 
Last edited:
This appears to be Bootstrap if I'm not mistaken.

@Hue Tran, it appears you're trying to use CSS variables directly within your HTML document. I like the idea; however, this won't work as expected. CSS variables work within the CSS file itself or within the <style></style> tags, similar to what @Johna mentioned:



When you use a framework like Bootstrap and add predefined names to the HTML tag class="" attribute, e.g., bg-primary-subtle. You are applying styles that the Bootstrap developers have predefined.

With that said, if you want to use your CSS variable to adjust the colour of the element, you'll need to either edit the predefined class or add an additional class name (recommend the latter), e.g. <div class="bg-primary-subtle myNewAdditionalClassName">, then in your CSS, create a statement for that particular class name using your CSS variable; here's an example:
CSS:
.myNewAdditionalClassName {
   background-color:  var(--primary);
}

You should now see the colour change for the element you have set in your CSS variable.

Hope that helps!
Hi, thanks for your really helpful advice, so I have the basic understanding how this works. So I try to make "!important" to the text or background color want in CSS. It seems to work at this moment. Do you think I could you this to solve the problem?
 
This appears to be Bootstrap if I'm not mistaken.
Yeah, you're probably right, some of those classes are not in TailwindCSS.

I'm not sure if it's the same with bootstrap, but in tailwind, you can add custom styles in a config file. You might have to check the docs.
You could of course do it the way @Malcolm showed, but it may be more convenient if you can use a config file.
 
Hi, thanks for your really helpful advice, so I have the basic understanding how this works. So I try to make "!important" to the text or background color want in CSS. It seems to work at this moment. Do you think I could you this to solve the problem?

"!important" should be used as a last resort.

You should be using the class name like Malcolm showed:

.text-primary {
color: var(--primary);
}

and the value "var(--primary)" is defined earlier in your css:

:root{
--primary: #808080;
}

Then to apply that style to text, add the class to your text container:

<p class="text-primary">My text</p>

If you are relying on "!important" to get your styles to work, you are most likely having cascade conflicts. Another rule in your CSS has a higher specificity (stronger influence) than your current style. You should look to solve this another way as using "!important" will cause you headache later on down the road.
 
"!important" should be used as a last resort.

You should be using the class name like Malcolm showed:

.text-primary {
color: var(--primary);
}

and the value "var(--primary)" is defined earlier in your css:

:root{
--primary: #808080;
}

Then to apply that style to text, add the class to your text container:

<p class="text-primary">My text</p>

If you are relying on "!important" to get your styles to work, you are most likely having cascade conflicts. Another rule in your CSS has a higher specificity (stronger influence) than your current style. You should look to solve this another way as using "!important" will cause you headache later on down the road.
I got it. Thanks so much for your advice :blush:
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom