CSS styles not applying to a specific element
Asked 5/21/2024Viewed 2,349 times
210
I have a `div` with a class `my-custom-box`, and I am trying to apply a background color to it.
HTML: `
CSS: `.my-custom-box { background-color: blue; }`
For some reason, the background color is not changing. I checked in dev tools, and my style is being overridden by another, more generic style from a library. What are the best practices to ensure my styles apply?
HTML: `
Content
`CSS: `.my-custom-box { background-color: blue; }`
For some reason, the background color is not changing. I checked in dev tools, and my style is being overridden by another, more generic style from a library. What are the best practices to ensure my styles apply?
css
specificity
styling
CH
askedabout 1 year ago
CharlieCode2,400
2 Answers
22
This is a common problem with CSS specificity. Try using a more specific selector or `!important` (though use `!important` sparingly).
DI
answeredabout 1 year ago
DianaDev550
3
You can also use utility classes from Tailwind CSS if you have it set up in your project. Something like `text-blue-500` would work.
BO
answeredabout 1 year ago
BobTheBuilder870
Your Answer