I am trying a new approach to CSS where I am starting to create a library of common styles and then combining them together to get the desired end effect.
The text box below is turned green, but the text in the box isn’t Tahoma white. Why?
I know that’s Tahoma font because I removed Arial/sans-serif from the rule in the inspector toolbar, and no change occured to the font. Then I delete Tahoma from the font, and I see the font change. So I know that it’s white tahoma being used.
I need a demo to see why it isn’t picking up the Tahoma class or color.
Go to codepen.io, paste your full main/components.css (everything) and just give me an example where it isn’t working.
The code you gave shows it’s working. There’s something different about your CSS and what I have. Perhaps some sort of error. Have you validated your code? CSS and HTML?
Styles will cascade down to the children (those styles) and the only thing that will override it is if you manually have styles that conflict with the parent (on the inner children).
That might not make sense…ok basically styles from a parent usually cascade down to the children. Obviously, if you set styles on a child though, that will be used instead of the parents CSS.
This applies to stuff like font, color, etc. Not stuff like position:absolute, display, etc…
CSS is a complicated language. You can have correct code but it won’t work as expected unless you actually understand the underlying logic. Behind it. CSS is pretty good at knowing the authors skill.
I’m guessing this was just a case of that. Glad it’s working.
It’s possible your server is making use of a CDN like cloudfare which would have server caching. Not able to be cleared by the normal CTRL+F5. I find that I have to go manually in my CDN to clear that cache. It’s possible that’s what you were experiencing.
Although the more likely scenario is that you now know about how CSS works so CSS recognized that and allows your styles to work accordingly. CSS was probably spying on this thread .