I am attempting to create a unique class that can be applied to text elements in order to change their color based on a variable. Strangely, when I include the style inline it works perfectly fine, but when I try to define a custom class in my CSS stylesheet, it doesn't seem to have any effect. What adds to the confusion is that one of my other custom classes does work as expected.
Here is the specific HTML snippet causing the issue:
/* Define initial variable values here */
:root {
--button-color: #00FFFF;
}
/* Allow colors to be customized here */
.text-color {
color: var(--button-color);
}
.border-color {
border-width: 5px;
border-style: solid;
border-color: #00FFFF;
}
.clickable {
background-image: url('../patterns/debut_dark.png');
}<h3 class='clickable text-center py-2 mb-2 rounded shadow text-color border-color'>Hello</h4>While clickable, which is a custom class, works without any issues, the bootstrap classes also function correctly. However, my custom classes text-color and border-color, defined in the same file as clickable, do not seem to work properly.
I am struggling to understand why the class declarations are ineffective while inline styles work just fine.
<h3 class='clickable text-center py-2 mb-2 rounded shadow text-color border-color' style="color: var(--button-color);">Hello</h4>
I would greatly appreciate any assistance with this matter.