Why doesn't my text pick up parent styles?

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?

<div class="boxInfo bckgrd-green border-green font-tahoma color-white">
    <div class='size-0150'>We save you</div>
    <div class='size-0500'>$$$</div>
</div>

We’d need to see the CSS there to create a (non) working demo :slight_smile: .

Here you go…

.boxInfo{
    margin: 0 0 20px 0;
    padding: 15px 15px 15px 15px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    line-height: normal;
    font-weight: bold;
    text-align: center;
}

.bckgrd-green{
    background-color: #008000;
}

.border-green{
    border: 1px solid #008000;
}

.font-tahoma{
    font-family: Tahoma, Arial,sans-serif;
}

.color-white{
    color: #FFF;
}

.size-0150{
    font-size: 1.5em;
}

.size-0500{
    font-size: 5em;
}

It is for me.

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.

Here is what I see…

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?

Thanks for trying to help, but this is another case where you need to see all of my code and I can’t show all of my code.

This must be something obvious.

Let me go back and look.

I thought the issue had to do that my inside div’s were ignoring the parent div

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…

@RyanReese,

Now it works. I blame you, Ryan. :wink:

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.

Quite often I have caching issues with FireFox - even when I clear the cache.

Maybe that was the issue?

I was pretty sure my code was okay, so the results surprised me.

You must have scared my CSS into order!

Thanks!

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 :speak_no_evil: .

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.